This challenge encourages you to practice whatever you want to learn for 100 days a minimum of 1 hour per day. It is important to write a log with the learned every day.
After a long time thinking 🙄 about starting, today I said "Challenge accepted"🥳
🏆 My goal: Learn HTML, CSS, and JavaScript.
🛤️ Links to the roadmap:
Today's Progress:
🛫 Starting! Taking a quick HTML review🛵. I remembered the markup language structure, syntax and some elements that usually are used🤓.
Link(s) to work:
Today's Progress:
Today I went into Cascading Style Sheets (CSS). 👩Exploring the relationship between content, padding, margin, and border📏 also known as the box model📦
Link(s) to work:
Today's Progress:
🍝CSS Diner: A game for learning CSS selectors. Done✅
Selectors are how you pick which element to apply styles to.
h1 {
text-align: center;
}Here h1 is the selector. Sellect all <h1> elements and applies text-align style.
Link(s) to work:
- CSS Diner Made by @flukeout
Today's Progress:
How CSS style overriding works by relevance:
- Id style
- Class style (Last class declaration more relevant)
- Element style
When !important rule is used, it overrides any other style declarations.
Link(s) to work:
Today's Progress:
Keep going with CSS🤠
👩🎨Style a specific color using: Color name, Hex code, abbreviated Hex Code or RGB values.
/*Color name*/
.text-green {
color: green;
}
/*Hex code*/
.text-pink {
color: #FFC0CB;
}
/*Hex code abbreviated*/
.text-white {
color: #FFF;
}
/*RGB value*/
.text-red {
color: rgb(255,0,0);
}Link(s) to work:
Today's Progress:
📋 CSS variables Today, I complemented Freecodecamp tutorial with some of w3school 😎✨
https://www.w3schools.com/css/css3_variables.asp
Link(s) to work:
I was working on my portfolio 👩🏭 and I did some CSS Freecodecamp challenges 💫 , for today no too much to show or say.😬
Understanding GitHub 😺 Took time (almost all afternoon🤪) but finally, I created my repository 🤖
Link(s) to work:
✅ Still doing my portfolio 😝 and practiced some CSS properties.
Link(s) to work:
And finally, this is my portfolio🥳 (Still building 👩🔧) ❤️---❤️---❤️-->
Link(s) to work:
🧐 Exploring CSS properties:
👉🏿 position 🗺️
Link(s) to work:
😍 I am in love with CSS. I tried some animations and look here ⬇️ the result.😊
Link(s) to work:
📲 Accessibility web content challenges 🔤
- ☝️Have well-organized code that uses appropriate markup.
- ✌️Ensure text alternatives exist for non-text and visual content.
- 🤟Create an easily-navigated page that's keyboard-friendly. From @freeCodeCamp 🤩
Link(s) to work:
🛠️ Practicing some HTML tags. I still follow freeCodeCamp tutorial 🤓
Link(s) to work:
Today I meet amazing women 😊 learnt basic Python 🤖 and enjoyed 3D workshop 😯🐖 Great Sunday Meetup!
CSS Flexbox📦
🌈 Learned how to design flexible and responsive layouts 🎑
Link(s) to work:
Today I practiced what I learned yesterday. I used an amazing and interactive website Flexbox Froggy. It is a game for learning CSS flexbox created by Codepip
Link(s) to work:
I have been learning #CSS grid, this article help me to understand a lot😌🔢
- CSS Grid for Designers by Johna Paolino
Watering carrots to practice #CSS grid 🥕🚿😄
👩🏫Also, I practiced some properties in codepen.
Grid Garden is a game created by Codepip.
Link(s) to work:
🤗 I am celebrating twenty days of code 👏 and finished my first project 🥳💃
Look here my tribute page to Dr. Manuel Elkin Patarroyo #vaccineagainstmalaria
Link(s) to work:
- Project 1 - Tribute page: Codepen practice
Taking advantage to the bad weather 🥶 and staying at home 😏 I did #freeCodeCamp project 2: Build a Survey Form.📑
Link(s) to work:
- project 2 - Build a Survey Form: Codepen practice
👩🔧 Doing #freeCodeCamp Responsive Web Design Projects 💞
Project 3: Product Landing Page 😎
Link(s) to work:
- Project 3 - Product Landing Page: Codepen practice
😊 Still with #freeCodeCamp Responsive Web Design Projects 💪
Project 4: Technical Documentation Page 🤖
Link(s) to work:
- Project 4 - Technical Documentation Page: Codepen practice
🥳 #freeCodeCamp Responsive Web Design Projects 💪
Project 5: Build a Personal Portfolio Webpage 👩💻
Link(s) to work:
- Project 5 - Personal Portfolio Webpage: Codepen practice
Starting with fundamental #javascript 🥳
🙏 I hope I will get soon my Javascript Algorithms And Data Structures 🙄 #freecodecamp certification 👩🎓
Learning JavaScript Basic Methods
.push() ---> Adds one or more parameters at the end of the array.
var arr = [1,2,3];
arr.push(4);
//arr is now [1,2,3,4].pop() ---> Removes the last element from an array and returns that element.
var arr = [1,2,3];
var val = arr.pop();
//arr is now [1,2]
//val is now [3].shift() ---> Removes the first element from an array.
var arr = [1,2,3];
var val = arr.shift();
//arr is now [2,3]
//val is now [1].unshift() ---> Adds the element at the beginning of the array.
var arr = [1,2,3];
arr.unshift(0);
//arr is now [0,1,2,3]Taking time to learn about version control and GitHub. Today I used GitHub Learning Lab to practice:
😻 Introduction to GitHub.
🤳 Communicating using Markdown.
Link(s) to work:
Scope refers to the visibility of variables.
In JavaScript there are two types of scope:
- Local scope
- Global scope
Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code.
See an example:
var someColor = "red"; // Variable with global scope
function myFun() {
var someSentence = someColor + " hat"; // Variable with local scope
return someSentence;
}
console.log("I have a " + myFun()); // I have a red hatLink(s) to resources:
🥳 Learning #JavaScript 🧙♀️ how to use functions. I did a comparative exercise for lookups: Using Objects Vs Switch statement Vs Else if statement ⬇️
Switch statement:
function myFunction(val) {
var result = "";
switch(val) {
case "a":
result = "Adams";
break;
case "b":
result = "Boston";
break;
case "c":
result = "Chicago";
break;
case "d":
result = "Denver";
break;
case "e":
result = "Easy";
break;
case "f":
result = "Frank";
}
return result;
}
myFunction("c"); // "Chicago"Else if statement:
function myFunction(val) {
var result = "";
if (val === "a") {
result = "Adams";
} else if ( val === "b") {
result = "Boston";
} else if ( val === "c") {
result = "Chicago";
} else if ( val === "d") {
result = "Denver";
} else if ( val === "e") {
result = "Easy";
} else if ( val === "f") {
result = "Frank";
}
return result;
}
myFunction("c"); // "Chicago"Object:
function myFunction(val) {
var result = "";
var lookup = {
"a" : "Adams",
"b" : "Boston",
"c" : "Chicago",
"d" : "Denver",
"e" : "Easy",
"f" : "Frank"
};
result = lookup[val];
return result;
}
myFunction("c"); // "Chicago"30 days ago I started this journey 😱 the time is going so fast! 🚀
Today I took a little break from JavaScript and got relax playing with #CSS 🥰 I love drawing with CSS, I think I found a new hobby
Link(s) to work:
🤩 In 20% of JavaScript Beginner Bootcamp (2019) #udemy course, created by @robmerrill.
Excellent material, a lot of exercises, and awesome explanations 😉
Link(s) to resources:
🧚♀️ Using basic JavaScript, HTML, and CSS I did a little web app that generates random insults 😝🤬
Link(s) to work:
🙆♀️ Today, I was solving some #JavaScript #freeCodeCamp challenges and practiced how to access nested objects and nested arrays.🤪
The Challenge:
Basic JavaScript: Record Collection
You are given a JSON object representing a part of your musical album collection. Each album has several properties and a unique id number as its key. Not all albums have complete information.
Write a function which takes an album's id (like 2548), a property prop (like "artist" or "tracks"), and a value (like "Addicted to Love") to modify the data in this collection.
If prop isn't "tracks" and value isn't empty (""), update or set the value for that record album's property.
Your function must always return the entire collection object.
There are several rules for handling incomplete data:
If prop is "tracks" but the album doesn't have a "tracks" property, create an empty array before adding the new value to the album's corresponding property.
If prop is "tracks" and value isn't empty (""), push the value onto the end of the album's existing tracks array.
If value is empty (""), delete the given prop property from the album.
Hints Use bracket notation when accessing object properties with variables.
Push is an array method you can read about on Mozilla Developer Network.
You may refer back to Manipulating Complex Objects Introducing JavaScript Object Notation (JSON) for a refresher.
The solution:
var collection = {
"2548": {
"album": "Slippery When Wet",
"artist": "Bon Jovi",
"tracks": [
"Let It Rock",
"You Give Love a Bad Name"
]
},
"2468": {
"album": "1999",
"artist": "Prince",
"tracks": [
"1999",
"Little Red Corvette"
]
},
"1245": {
"artist": "Robert Palmer",
"tracks": [ ]
},
"5439": {
"album": "ABBA Gold"
}
};
function updateRecords(id, prop, value) {
if (prop !== "tracks" && value !== "") {
collection[id][prop] = value;
}
if (prop === "tracks" && !collection[id].hasOwnProperty("tracks")) {
collection[id][prop] = [];
collection[id][prop].push(value);
}
if (prop === "tracks" && value !== "") {
collection[id][prop].push(value);
}
if (value === "") {
delete collection[id][prop];
}
return collection;
}
// Alter values below to test your code
updateRecords(5439, "artist", "ABBA");Building shapes using pure #CSS. 🔴🔶🔼💚🛑
Link(s) to work:
Some #ES6 topics that I learned today:
✅ Differences between var, const and let.
✅ Use Arrow Functions to write anonymous functions.
const myFunc = () => "value"✅ Use methods map() and filter().
/*
Use arrow function syntax to compute the square of only the positive integers (decimal numbers are not integers)
in the array realNumberArray and store the new array in the variable squaredIntegers.
*/
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];
const squareList = (arr) => {
const squaredIntegers =
// use .filter() to sellect numbers that meet the conditions: 1. positive number (number>0) and 2. number without decimals (number%1 == 0)
arr.filter((number) => number > 0 && number% 1 === 0)
// use .map() to apply a math operation to each number, in this case get the squared (Math.pow(number, 2)) to each integer
.map((number) => Math.pow(number, 2));
return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
// const squaredIntegers = [16, 1764, 36]🔥 Finished ES6 chapter on #freeCodeCamp
🐻 I did a mini console App: "Bear, Human, Gun Game" #udemy
Bear, Human, or Gun
Bear human gun is just like Rock paper scissors. Each player chooses either bear, human, or gun. The items are compared, and whichever player chooses the more powerful item wins.
The possible outcomes are:
-
Bear mauls human.
-
Human disarms gun.
-
Gun shoots bear.
-
If there's a tie, then the game ends in a draw.
Challenge:
Our code will break the game into four parts:
-
Get the user's choice.
-
Get the computer's choice.
-
Compare the two choices and determine a winner.
-
Start the program and display the results.
Solution:
function getUserChoice(userInput) {
userInput = userInput.toLowerCase();
if (userInput === "bear" || userInput === "human" || userInput === "gun") {
return userInput;
} else {
return "Please sellect bear, human or gun";
}
}
function getComputerChoice() {
var choose = ["bear", "human", "gun"];
var randomNumber = Math.floor(Math.random() * choose.length);
var randomChoose = choose[randomNumber];
return randomChoose;
}
function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "Game tie!";
}
if (userChoice === "human") {
if (computerChoice === "bear") {
return "computer won!";
} else {
return "user won!";
}
}
if (userChoice === "bear") {
if (computerChoice === "gun") {
return "computer won!";
} else {
return "user won!";
}
}
if (userChoice === "gun") {
if (computerChoice === "human") {
return "computer won!";
} else {
return "user won!";
}
}
}
function playGame() {
var promptUserChoice = prompt("Please choose bear, human or gun");
promptUserChoice = promptUserChoice.toLowerCase();
if (promptUserChoice === "") {
return "Please choose bear, human or gun";
}
var userChoice = getUserChoice(promptUserChoice);
var computerChoice = getComputerChoice();
console.log(userChoice);
console.log(computerChoice);
console.log(determineWinner(userChoice, computerChoice));
}
playGame();🐨 Here ⬇️ my #CSS Koala 🥳😍
Link(s) to work:
🤩 Improving my #CSS skills 🚀
Amazing tutorial by Mike Mangialardi 😻
I drew a diamond and used animation to do it shine 💎✨
Link(s) to resources:
👋 Working on regex challenges😌 Hopefully finish this chapter tomorrow 😜
I really enjoy working with #CSS ❤️
Today I got some inspiration from comics... 🤖
Link(s) to work:
✔️ Mini App to convert temperature using basic JavaScript 🌡️
✔️ Mini App to measure calories using basic JavaScript 🧁🍊
✔️ Used Chrome DevTools to debug my code 🐛😊
Mini App: Convert temperature
Challenge:
Use class keyword to create a Thermostat class. The constructor accepts Fahrenheit temperature.
Now create getter and setter in the class, to obtain the temperature in Celsius scale.
Remember that C = 5/9 * (F - 32) and F = C * 9.0 / 5 + 32, where F is the value of temperature in Fahrenheit scale, and C is the value of the same temperature in Celsius scale.
Solution:
function makeClass() {
"use strict";
/* Alter code below this line */
class Thermostat {
constructor (temperatureFahrenheit) {
this.temperatureFahrenheit = temperatureFahrenheit;
}
get temperature() {
return 5/9 * (this.temperatureFahrenheit - 32);
}
set temperature(updateTemperature) {
this.temperatureFahrenheit = updateTemperature * 9.0 / 5 + 32;
}
}
/* Alter code above this line */
return Thermostat;
}
const Thermostat = makeClass();
const thermos = new Thermostat(76); // setting in Fahrenheit scale
let temp = thermos.temperature; // 24.44 in C
thermos.temperature = 26;
temp = thermos.temperature; // 26 in CMini App: Calorie Calculator
Challenge:
The program will determine the actual and ideal calories you consumed last week. It will return a message based on if you ate too much or too little.
Solution:
function inputCaloriesByDay(day) {
switch (day) {
case "Monday":
return 3500;
break;
case "Tuesday":
return 1500;
break;
case "Wednesday":
return 2500;
break;
case "Thursday":
return 2000;
break;
case "Friday":
return 3000;
break;
case "Saturday":
return 2800;
break;
case "Sunday":
return 3000;
break;
default:
return "Please choose a valid day";
}
}
function getTotalCalories() {
var sum = inputCaloriesByDay("Monday")+
inputCaloriesByDay("Tuesday")+
inputCaloriesByDay("Wednesday")+
inputCaloriesByDay("Thursday")+
inputCaloriesByDay("Friday")+
inputCaloriesByDay("Saturday")+
inputCaloriesByDay("Sunday");
return sum;
}
function getIdealCalories() {
var idealDailyCalories = 2000;
return idealDailyCalories*7;
}
function calculateHealthPlan() {
var actualCalories = getTotalCalories();
var idealCalories = getIdealCalories();
if (actualCalories === idealCalories) {
return "You ate just the right amount of food!";
} else if (actualCalories > idealCalories) {
return "Time to head to the gym!";
} else if (actualCalories < idealCalories) {
return "Time for seconds!";
}
}
console.log(calculateHealthPlan()); //Time to head to the gym!Today I was working on:
👆 JavaScript Regular Expressions ✍️
✌️ Mini App Magic Eight Ball to predict the future 🧙♀️
Mini App: Magic Eight Ball
Challenge:
The user will be able to input a question, then our program will output a random fortune.
Solution:
var userName= prompt("What is your name?");
if (userName) {
console.log("Hello " + userName + "!");
} else {
console.log("Hello!");
}
var userQuestion= prompt("Please ask a question!");
console.log(userName + " ask: " + userQuestion);
var randomNumber = Math.floor(Math.random()*8);
var eightBall = "";
switch (randomNumber) {
case 0:
eightBall = 'Better not tell you now.';
break;
case 1:
eightBall = 'Concentrate and ask again.';
break;
case 2:
eightBall = 'Reply hazy try again';
break;
case 3:
eightBall = 'Cannot predict now';
break;
case 4:
eightBall = 'My reply is no.';
break;
case 5:
eightBall = 'My sources say no';
break;
case 6:
eightBall = 'Outlook not so good';
break;
case 7:
eightBall = 'Signs point to yes';
break;
}
console.log("Eight Ball answer: "+eightBall);
//Hello Cecilia!
//Cecilia ask: Will I win
//Eight Ball answer: My sources say noI did this figure using HTML and CSS 🥰
🤔 I am thinking which will be the next superhero figure 🤭
Link(s) to work:
📌 I finished the eternal "JavaScript Regular Expressions" section. I don't know why it took to me so long time to finish it🤪
📌 I did all the Debugging challenges section 🥳
📌 And I started Basic Data Structures section 👩🔬
Learning JavaScript Data Structures:
🎖️ Creating arrays and consulting them.
🎖️ Modify arrays using methods: push(), unshift(), pop(), shift() and splice().
🎖️ Also, copy or extract information from arrays using slice().
Today I learn to...
🎀 Use Spread Operator to copy arrays and combine arrays 💫
🎀 Use indexOf() to validate elements in an array ✔️
Using Spread Operator to copy arrays
function copyMachine(arr, num) {
let newArr = [];
while (num >= 1) {
newArr.push([...arr]);
num--;
}
return newArr;
}
console.log(copyMachine([true, false, true], 2)); //[true, false, true,true, false, true]Using Spread Operator to combine arrays
function spreadOut() {
let fragment = ['to', 'code'];
let sentence = ["learning", ...fragment, "is", "fun"];
return sentence;
}
console.log(spreadOut()); // ['learning', 'to', 'code', 'is', 'fun']Using indexOf() to validate elements in an array
function quickCheck(arr, elem) {
return arr.indexOf(elem) >= 0 ? true : false;
}
console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms')); //falseI finished the "Basic Data Structure Challenges" 🥳 and I learned how to:
⛳️ Generate an array of object keys with Object.keys()
⛳️ Use for... in statement
⛳️ Use keyword delete to remove object properties
Some examples using for... in statement
Example 1
We've defined a function, countOnline; use a for...in statement within this function to loop through the users in the users object and return the number of users whose online property is set to true.
let users = {
Alan: {
age: 27,
online: false
},
Jeff: {
age: 32,
online: true
},
Sarah: {
age: 48,
online: false
},
Ryan: {
age: 19,
online: true
}
};
function countOnline(obj) {
let count = 0;
for (let userKey in obj) {
let userValue = obj[userKey];
if (userValue.online) {
count += 1;
}
};
return count;
}
console.log(countOnline(users)); //2Example 2
We've defined a function, countOnline; use a for...in statement within this function to loop through the users in the users object and return the number of users whose online property is set to true.
let user = {
name: 'Kenneth',
age: 28,
data: {
username: 'kennethCodesAllDay',
joinDate: 'March 26, 2016',
organization: 'freeCodeCamp',
friends: [
'Sam',
'Kira',
'Tomo'
],
location: {
city: 'San Francisco',
state: 'CA',
country: 'USA'
}
}
};
function addFriend(userObj, friend) {
// change code below this line
for (let dataKey in userObj) {
let data = userObj[dataKey];
userObj.data.friends.push(friend);
return userObj.data.friends;
}
// change code above this line
}
console.log(addFriend(user, 'Pete'));Spent a long time trying to solve the "Basic Algorithm Challenges" 😔 only 5 today and I'm feeling like 🤯
I hope soon I could solve them easily and faster 🙏
⬇️ Function to get the largest number in an array with subarrays ⬇️
Challenge:
Return Largest Numbers in Arrays.
Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.
Remember, you can iterate through an array with a simple for loop, and access each member with array syntax arr[i].
Solution:
function largestOfFour(arr) {
let newArr = [];
for (let i = 0; i < arr.length; i++) {
let largestNumber = arr[i][0];
for (let j = 1; j < arr[i].length; j++) {
if (arr[i][j] > largestNumber) {
largestNumber = arr[i][j];
}
}
newArr.push(largestNumber);
}
return newArr;
}
largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
//newArr = [5,27,39,1001]I used #HTML and #CSS to draw Captain Marvel 🦸♀️ 💫
Check it here 😀⬇️
Link(s) to work:
I was working in a double slider sign-in and sign-up form challenge #weeklyCodingChallenge by @florinpop1705
Link(s) to resources:
Link(s) to work:
Being in the middle of my way to achieve #100DaysOfCode :
🚩 I took a week to rest 🤪
🚩 I got my first job as a Junior Frontend Developer 🥳😊
🚩 I did a happy unicorn using HTML/CSS 🦄
Link(s) to work:
Planning to start learning Frontend frameworks 👩🎨🖼️🖌️
I was reading about Bootstrap and Vue.js 🤓
Link(s) to resources:
Today I started Vue.js workshop from @VueVixens community 🦊
🤓 I did Chapter 1 and I am so excited I want to learn more 🥰
Link(s) to resources:
Link(s) to work:
🔖Chapter 2:
Learned how to create a data file (JSON object) 🤯 and used it to show information on the website 🥵 Still trying to understand it... maybe tomorrow I will need to go in it again😅
Link(s) to work:
🔖Chapter 3 #VueVixens workshop:
Learned about: axios library, how to call API, some function to iterate arrays 🤩
🧙♀️I did my App more interactive, now is it getting random images from the internet 🥳
Link(s) to work:
Today I worked in a face design 🧔 I made it using HTML/CSS 🥰
Link(s) to work:
😎 I was working in a dark mode page 😊
I got inspiration from Dev.to
Link(s) to resources:
Link(s) to work:
It's been a while since my last update but here we are 🙈
🏆 My goal: Learn JavaScript
I started doing some #katas, not to bad with the easy ones 🤪@codewars #javascript #WomenWhoCode #womenintech #CodeNewbie
Link(s) to resources:
Starting from basic concepts: variables, operator, data types... JavaScript comes to me! 🙆♀️🥰 #javascript #WomenWhoCode #womenintech #CodeNewbie
Link(s) to resources:
The challenge continue, today I did some katas.🚀 #javascript #WomenWhoCode #womenintech #CodeNewbie
Link(s) to resources:
#javascript #WomenWhoCode #womenintech #CodeNewbie
🧐I was looking for some good explanation about forEach, map, filter, reduce and sort. And yeah🤯 I found this super nice video📺 "JavaScript Higher Order Functions & Arrays"
Link(s) to resources:
Here some examples
const companies= [
{name: "Company One", category: "Finance", start: 1981, end: 2004},
{name: "Company Two", category: "Retail", start: 1992, end: 2008},
{name: "Company Three", category: "Auto", start: 1999, end: 2007},
{name: "Company Four", category: "Retail", start: 1989, end: 2010},
{name: "Company Five", category: "Technology", start: 2009, end: 2014},
{name: "Company Six", category: "Finance", start: 1987, end: 2010},
{name: "Company Seven", category: "Auto", start: 1986, end: 1996},
{name: "Company Eight", category: "Technology", start: 2011, end: 2016},
{name: "Company Nine", category: "Retail", start: 1981, end: 1989}
];
const ages = [33, 12, 20, 16, 5, 54, 21, 44, 61, 13, 15, 45, 25, 64, 32];forEach
//show all companies names
//way 1
for(let i = 0; i < companies.length; i++) {
console.log(companies[i]);
}
//way 2
companies.forEach(function(company) {
console.log(company.name);
});filter
// Get 21 and older
//way 1
let canDrink = [];
for(let i = 0; i < ages.length; i++) {
if(ages[i] >= 21) {
canDrink.push(ages[i]);
}
}
//way 2
const canDrink = ages.filter(function(age) {
if(age >= 21) {
return true;
}
});
//way 3
const canDrink = ages.filter(age => age >= 21);
// Filter retail companies
//way 1
const retailCompanies = companies.filter(function(company) {
if(company.category === 'Retail') {
return true;
}
});
//way 2
const retailCompanies = companies.filter(company => company.category === 'Retail');
// Get 80s companies
const eightiesCompanies = companies.filter(company => (company.start >= 1980 && company.start < 1990));
// Get companies that lasted 10 years or more
const lastedTenYears = companies.filter(company => (company.end - company.start >= 10));map
// Create array of company names
//way 1
const companyNames = companies.map(function(company) {
return company.name;
});
//way 2
const testMap = companies.map(function(company) {
return `${company.name} [${company.start} - ${company.end}]`;
});
//way 3
const testMap = companies.map(company => `${company.name} [${company.start} - ${company.end}]`);
//Double map, square the age and then ^2
const ageMap = ages
.map(age => Math.sqrt(age))
.map(age => age * 2);Sort
// Sort companies by start year
//way 1
const sortedCompanies = companies.sort(function(c1, c2) {
if(c1.start > c2.start) {
return 1;
} else {
return -1;
}
});
//way 2
const sortedCompanies = companies.sort((a, b) => (a.start > b.start ? 1 : -1));
// Sort ages
const sortAges = ages.sort((a, b) => a - b);
console.log(sortAges);reduce
//Sum the ages
//way 1
let ageSum = 0;
for(let i = 0; i < ages.length; i++) {
ageSum += ages[i];
}
//way 2
const ageSum = ages.reduce(function(total, age) {
return total + age;
}, 0);
//way 3
const ageSum = ages.reduce((total, age) => total + age, 0);
// Get total years for all companies
//way 1
const totalYears = companies.reduce(function(total, company) {
return total + (company.end - company.start);
}, 0);
//way 2
const totalYears = companies.reduce((total, company) => total + (company.end - company.start), 0);Combine Methods
const combined = ages
.map(age => age * 2)
.filter(age => age >= 40)
.sort((a, b) => a - b)
.reduce((a, b) => a + b, 0);
console.log(combined);👩🔧Practice and practice... I made a function to reverse the words in a sentence🤩 reverseWords("i love code") // should return "code love i" #javascript #WomenWhoCode #womenintech #CodeNewbie
Here the code:
function reverseWords(str){
const newArr = str.split(" ")
return newArr.reverse().join(" ")
}
function reverseWords(str){
return str.split(" ").reverse().join(" ")
}
const reverseWords = str => str.split(" ").reverse().join(" ")📖 Read some articles 👩🔧 Practiced on Freecodecamp 🤪 Cleaned my Download folder (I was keeping so much trash 🗑️) #javascript #WomenWhoCode #womenintech #CodeNewbie
Today I was no feeling me good, I am getting sick 🤧 So, I read an great article. Is time to start to build things! 👩💻 https://www.freecodecamp.org/news/how-to-go-from-coding-tutorials-to-building-your-own-projects-b9ab51074980/amp/?__twitter_impression=true #WomenWhoCode #codeNewbie
I was learning some basic #VueJS
Check out this awesome @scrimba tutorial I just watched: https://scrimba.com/p/pZ45Hz/crVeyTd
#WomenWhoCode #womenintech #CodeNewbie
Here my pick color result ⬇️
https://github.com/gmoraleslondono/emojifying
I spend some time learning #VueJS from the official documentation 😺 https://vuejs.org/v2/guide/#What-is-Vue-js
And I started to build a basic todo list application 📝👏
#WomenWhoCode #womenintech #CodeNewbie
Today I was working on my own website 👩🏭
💅 I add some color
🚀 Set some CSS animation
🔢 I did it responsive
I am so happy with it 😻👏
Check it here ⬇️ https://gmoraleslondono.github.io/portfolio/index.html
#WomenWhoCode #womenintech #CodeNewbie
📝😊I started to build a Todo List App following vueschool tutorial
#WomenWhoCode #womenintech #CodeNewbie
👋Still Working in a Todo List App.
Frontend almost is done 🤩 tomorrow I need work in functionalities 🛠️
Tutorial: https://vueschool.io/courses/vuejs-fundamentals
#WomenWhoCode #womenintech #CodeNewbie
Added validation to the required fields on an old project 😺
Also, I did some #codeWars katas to practice #javascript 💪🧠
#WomenWhoCode #womenintech #CodeNewbie
Still working in a #vue todo list app🤠
Today I learned to save data using the LocalStorage 🥳
Link(s) to resources:
👩🔧Started a new project following "Vue & Firebase Real-time Chat" 💬tutorial by The Net Ninja https://youtu.be/nWBtU2QNhxk
Today all was about setting the project and firebase 👍
#WomenWhoCode #womenintech #CodeNewbie
------------------------>
The Official Website for the Challenge www.100daysofcode.com
Made with ❤ by Gloria Morales