Easter Coding Sale Sale π
30% off
on all coding workshops ending on April 21st
Ending in 5 days
Get Deal
4d:16h:19m:30s
Get This Deal NOW
Create simple mobile app with video collection
HTML:
html Copy code
<body>
<div id="videoMenu">
<h3>My Video App!</h3>
<ul>
<li id="video1">Video 1</li>
<li id="video2">Video 2</li>
<li id="video3">Video 3</li>
</ul>
</div>
<div id="videoContent">
<div id="video1Content">
<!-- Video 1 Content Here -->
</div>
<div id="video2Content">
<!-- Video 2 Content Here -->
</div>
<div id="video3Content">
<!-- Video 3 Content Here -->
</div>
</div>
</body>
CSS:
css Copy code
#videoMenu {
text-align: center;
}
#videoMenu ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#videoMenu li {
padding: 10px;
background-color: #ccc;
margin: 3px;
cursor: pointer;
display: inline-block;
}
#videoMenu li:hover {
background-color: #aaa;
}
#videoContent {
display: none;
}
#videoContent div {
border: 1px solid #000;
padding: 10px;
background-color: #ccc;
}
JavaScript:
javascript Copy code
// Select the video list items
const videoMenuItems = document.querySelectorAll('#videoMenu li');
// Select the video content elements
const videoContents = document.querySelectorAll('#videoContent > div');
// When a user clicks on an item, show that item's content
videoMenuItems.forEach(item => {
item.addEventListener('click', e => {
// Hide all the video contents
videoContents.forEach(content => {
content.style.display = 'none';
});
// Get the clicked element's ID
const itemId = e.target.id;
// Show only the clicked element's content
const CLICKED_VIDEO_CONTENT = document.querySelector(`#${itemId}Content`);
CLICKED_VIDEO_CONTENT.style.display = 'block';
});
});
what programming languages does shecodes use
SheCodes uses a variety of programming languages in the different courses they offer on their platform. The main language they use across all courses is JavaScript, however they also introduce HTML and CSS during the introductory courses. For more information visit https://www.shecodes.io/courses.
What does incremental and increment mean
Incremental is an adjective that means increasing by a small amount at a time. Increment is a verb meaning to increase by a small amount. In programming languages this can be done using the ++ operator, as seen below in JavaScript:
javascript Copy code
let count = 0;
count++; // Increment count
Ask for "What country are you from?" in a prompt Alert βYou speak Portugueseβ if you are from Brazil or Portugal Alert βYou don't speak Portugueseβ otherwise Bonus point: make it work with brazil, BRAZIL, PORTUGAL, pORTugal
javascript Copy code
var country = prompt('What country are you from?');
if (/brazil|portugal/i.test(country)) {
alert('You speak Portuguese!');
} else {
alert("You don't speak Portuguese.");
}
how to set conditional rendering for language proerty
In JavaScript, you can use if statements to set conditional rendering based on a language property.
For example, if you want to render certain elements in the page based on the language property of 'en':
javascript Copy code
if (language === 'en') {
// render page elements in English
}
You can read more about using if statements in JavaScript here.
how do I write the | character on my keyboard?
The | character (known as the "pipe") can be written by typing "Shift + \ " on a Windows keyboard. On a Mac, use the "Shift + β₯ + \ " key combination.
For example,
js Copy code
const myVar = "this is a pipe -> | ";
an example for higher order function in javascript
In JavaScript, a higher-order function is a function that can take another function as an argument, or that returns a function as a result.
For example, the map method in JavaScript is a higher-order function. It takes a function as an argument to be called on each element of a given array and returns a new array with the desired results.
js Copy code
const nums = [1,2,3,4,5];
// multiply each element in array by 2
const doubled = nums.map(num => num * 2);
// doubled is now [2,4,6,8,10]
Display the current date following the following format: Today is Thursday, April 4, 2020
javascript Copy code
var today = new Date(); // Get the current date
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
console.log("Today is " + days[today.getDay()] + ", " + months[today.getMonth()] + " " + today.getDate() + ", " + today.getFullYear());
// Output: Today is Thursday, April 4, 2020
what is immutable data in functional programming with example
In functional programming, an immutable data structure is a data structure that cannot be modified after it has been created. A common example of an immutable data structure is a tuple in JavaScript. For example:
js Copy code
let myTuple = [1, 2, 3]; // Tuple with three elements
Any modification to the tuple, such as adding or removing elements, will result in a new tuple being created.
js Copy code
let modifiedTuple = myTuple.push(4); // The result is a new tuple [1,2,3,4]
Log the current month
javascript Copy code
let month = new Date().getMonth();
console.log(month);
Log the current year
javascript Copy code
const date = new Date();
const year = date.getFullYear();
console.log(year);
Log the current day
Using JavaScript, you can log the current day using the Date() function:
javascript Copy code
const today = new Date();
console.log(today);
You can also use the toDateString() method to get the current date in the Day Mon Date format, e.g. Tue Mar 16:
javascript Copy code
const today = new Date();
console.log(today.toDateString());
Log the current date
javascript Copy code
console.log(new Date());
This code will output the current date, for example: Tue Apr 21 2020 11:12:26 GMT+0100 (British Summer Time).
How do i start coding?
Getting started with coding is easier than you think! Here are a few steps to get you on your way:
Choose a programming language to learn. If you're not sure which language to start with, JavaScript is a good choice.
Acquire a coding editor. Visual Studio Code is a popular, open-source code editor that many developers use.
Take a few tutorials to learn the fundamentals. Codecademy and Freecodecamp are great free resources that provide comprehensive tutorials to get started with coding.
Create a project and practice your skills by writing code.
Find a community for support and to stay motivated. Many online coding communities exist to support developers at all stages of learning.
Good luck and happy coding!
how to access the same property within multiple nested objects?
If you are using JavaScript, you can use Object.assign() to access the same property within multiple nested objects.
For example,
js Copy code
const carAvailable = {
red: {
compact: true,
family: true
},
blue: {
compact: false,
family:true
}
}
let carColors = Object.assign({}, carAvailable.red, carAvailable.blue)
carColors // { compact: false, family: true }
In this example, you use Object.assign() to merge two objects - carAvailable.red and carAvailable.blue - then access the same family property in the newly created merged object. You can learn more about Object.assign() here.
Code to write percentage
javascript Copy code
const percentage = (num1, num2) => {
return num1/num2*100
}
percentage(3, 10) // 30
What is coding?
Coding is the process of using a programming language to create instructions for computers to process and execute. Coding is also referred to as computer programming, programming, or software development. A programming language is a type of language used to interact with computers. Examples of programming languages include JavaScript, Python, PHP and HTML.
A recursive function
javascript Copy code
function recursiveFunction(parameter){
//base condition
if (condition) {
return;
}
//recursive case
else {
//modify parameter
parameter = update(parameter);
//recursive call
recursiveFunction(parameter);
}
}
What are the basic steps to coding that everyone should know
There are five basic steps to coding that everyone should know:
For more detailed tutorials on how to code, please refer to code-specific tutorials for your language of choice, such as JavaScript tutorials.
How can I add "copy-on-click" in JavaScript?
To add "copy-on-click" in JavaScript, you can use the following code:
HTML:
html Copy code
<input type="text" id="copy-target" value="This is the text to copy on click" />
<button onclick="copyText()">Click to Copy</button>
CSS:
css Copy code
input {
font-size: 16px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
JavaScript:
javascript Copy code
function copyText() {
var text = document.getElementById("copy-target").value;
var dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.setAttribute("id", "dummy_id");
document.getElementById("dummy_id").value=text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
what is void in java
In Java, the void keyword is a reserved type used mainly to specify that a method does not return any data type. It can also be used as a non-access modifier of a constructor or method, or of a class in a class declaration. An example of its use in a method declaration is shown below:
java Copy code
public void sayHello() {
System.out.println("Hello!");
}
transfer an array of strings from of javascript fetch results into html content
You can use JavaScript's map() method to iterate over the array and create HTML elements for each string:
javascript Copy code
// array of strings, fetch results, etc.
const arr = ["example-string-1", "example-string-2",];
// create elements
const elements = arr.map(str => {
// create DOM element
const li = document.createElement("li");
// create text node containing the string
const textNode = document.createTextNode(str);
// append the text to the li
li.appendChild(textNode);
// return the li
return li;
});
// append the elements to the page
document.getElementById("list").appendChild(...elements);
Here's an example in Codepen: https://codepen.io/jennnn/pen/MWyVJEz
how do i know when to apply comma, double quotes etc when writing a code in javascript
When writing in JavaScript, there are a few key instances when using commas, quotes, parentheses, and brackets is necessary:
var items = ["apple", "banana", "pear"]
var greeting = "Hello World!"
function multiply(x, y) { return x * y; }
var hero = { name: "Dave", power: "Strength" };
For more information, including syntax formatting and other useful rules, please see the MDN JavaScript Guide.
Can you explain me functions?
A function is a block of organized, reusable code that is used to perform a single, related action. Functions provide better modularity for your application and a high degree of code reusing. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. There are several ways to create a function:
Below is an example of a function declaration in JavaScript:
javascript Copy code
// example of a function declaration
function sayHello(){
console.log('Hello!');
}
// call the function
sayHello();
This is an example of what the output looks like when this code is run:
Hello!
Write a function ,which take a price and quantity ,and show total amount
javascript Copy code
function showTotalAmount(price, quantity) {
return price * quantity;
}
// Example Usage
let price = 5;
let quantity = 2;
let result = showTotalAmount(price, quantity);
console.log(result); // 10
If you have any other questions, you can easily reach out to us here
AI stands for Artificial Intelligence. AI bots are able to learn from conversations with users and expand their knowledge this way.
SheCodes Athena will help you with technical questions about your code using artificial intelligence to find the answer. Imagine a super powerful human who has memorized everything on the internet and can access that knowledge in a matter of seconds. π€―
SheCodes Athena can answer most coding-related questions, even complicated ones! It can even find bugs in your code and tell you how to fix them in just a few seconds. Impressive, right?
Just remember we're still in testing mode so the AI may return strange or incorrect replies. Feel free to message us if this happens!
SheCodes Athena can only reply to coding-related technical questions. The same type of questions you would ask in the channels on Slack.
For questions that are not coding-related, write us here π
You should treat Athena like a SheCodes team member, so always be polite! π Ask your questions as detailed as possible, just like you would do on Slack.
Here are some examples:
- Prettier isn't working on my VS Code. How do I fix this?
- How do I make bullet points with different colors using the list element?
- My code in Codesandbox is having some issues. Can you please tell me what the issue is? [Include the link to your Codesandbox]
For now, SheCodes Athena is limited to 5 questions per day for each student.
In that case, you can either ask SheCodes Athena a follow-up question, or you can post on the designated weekly channel on Slack!
Our technical assistants are still available on Slack and are always happy to help! ππͺ
Remember, questions are limited to 1000 characters.
- If you're working with an HTML file: Post a snippet of your code related to the issue you're having (just copy the code and paste it into the question box).
- If you're working with Codesandbox: Good news, you can just post the link to your Codesandbox and the AI Assistant will be able to view your code.
- If you have a longer question that would require an entire HTML file or more than 1000 characters, post it in the designated weekly channels on Slack! π
Athena was the Greek goddess of wisdom, among other elements. She received her name from the city of Athens, which she is known for protecting.
Much like the goddess Athena, SheCodes Athena is also incredibly wise and can solve complicated coding puzzles in a matter of seconds! π
Not likely. AI can automate tasks and make developers' jobs more efficient but it can't fully replace the human ability to deal with complex software. And AI will still require human developers to supervise and improve it further.
So developers may see their tasks change but they won't be replaced by AI. π©βπ»π€π»