diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/00-introduction.js b/00-introduction.js deleted file mode 100644 index 067b12c..0000000 --- a/00-introduction.js +++ /dev/null @@ -1,2 +0,0 @@ -console.log ('Welcome JavaScript'); -console.log ('Congratulations! You wrote you first JavaScript code.'); diff --git a/01-variables.js b/01-variables.js deleted file mode 100644 index 39be803..0000000 --- a/01-variables.js +++ /dev/null @@ -1,18 +0,0 @@ -// Declaring different variables of different data types -let firstName = "Asabeneh"; -let lastName = "Yetayeh"; -let location = "Helsinki"; -const country = "Finland"; -let age = 100; -let isMarried = true; -const gravity = 9.81; -const boilingPoint = 100; -const PI = 3.14; -console.log(firstName, lastName, location, country, age, gravity, PI); - -// Variables can also be declaring in one line separated by comma -let name = "Asabeneh", - job = "Teacher", - live = "Finland"; - console.log(name, job, live) - diff --git a/04-string_interpolation.js b/04-string_interpolation.js deleted file mode 100644 index a4588d8..0000000 --- a/04-string_interpolation.js +++ /dev/null @@ -1,28 +0,0 @@ -let firstName = "Asabeneh"; -let letlastName = "Yetayeh"; -var age = 200; // number data type -var country = "Finland"; -var job = 'teacher'; -let lang = 'JavaScript' -var personInfo = `I am ${fullName}.I am a ${age} years old. I am a ${job} and I love teaching. -I live in ${country}.`; //ES6 - String interpolation method -console.log(personInfo); - -let numberOne = 10; -let numberTwo = 90; -console.log(`The sum of ${numberOne} and ${numberTwo} is ${numberOne + numberTwo}.`); -//More Examples -var gravity = 9.81; -var boilingPoint = 100; -var bodyTemp = 37; - -/* - The boiling point of water is 100 oC. - Human body temperatue is 37 oC. - The gravity of earth is 9.81 m/s2. - */ -console.log(`The boiling point of water is ${boilingPoint} oC.\nHuman body temperatue is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.` -); - - - diff --git a/10-if.js b/10-if.js deleted file mode 100644 index f63fb3b..0000000 --- a/10-if.js +++ /dev/null @@ -1,5 +0,0 @@ -//if -let isRaining = true; -if (isRaining) { - console.log("Remember to take your rain coat."); -} diff --git a/11-ifelse.js b/11-ifelse.js deleted file mode 100644 index eb2a7a3..0000000 --- a/11-ifelse.js +++ /dev/null @@ -1,6 +0,0 @@ -//if else -if (isRaining) { - console.log("It is raining. You need a rain coat."); -} else { - console.log("It is not raining. No need for rain coat."); -} diff --git a/12-if-else-if-else.js b/12-if-else-if-else.js deleted file mode 100644 index 8ee96bc..0000000 --- a/12-if-else-if-else.js +++ /dev/null @@ -1,11 +0,0 @@ -// if else if else -let weather = 'sunny'; -if (weather === "rainy") { - console.log("It is raining. You need a rain coat."); -} else if (weather === "cloudy") { - console.log("It might be cold you need a jacket."); -} else if (weather === "sunny") { - console.log("Go out freely."); -} else { - console.log("It is not raining. No need for rain coat."); -} diff --git a/14-switch.js b/14-switch.js deleted file mode 100644 index 06a9486..0000000 --- a/14-switch.js +++ /dev/null @@ -1,47 +0,0 @@ -// Switch -var weather = "cloudy"; -switch (weather) { - case "rainy": - console.log("It is raining. You need a rain coat."); - break; - case "cloudy": - console.log("It might be cold you need a jacket."); - break; - case "sunny": - console.log("Go out freely."); - break; - default: - console.log("It is not raining. No need for rain coat."); - break; -} - -// Swithc More Examples -var dayUserInput = prompt('What day is it ?'); -var day = dayUserInput.toLowerCase(); -switch (day) { - case 'monday': - console.log('Today is Monday'); - break; - case 'tuesday': - console.log('Today is Tuesday'); - break; - case 'wednesday': - console.log('Today is Wednesday'); - break; - case 'thursday': - console.log('Today is Thursday'); - break; - case 'friday': - console.log('Today is Friday'); - break; - case 'saturday': - console.log('Today is Saturday'); - break; - case 'sunday': - console.log('Today is Sunday'); - break; - - default: - console.log('It is not a week day.'); - break; -} \ No newline at end of file diff --git a/15-ternary-operator.js b/15-ternary-operator.js deleted file mode 100644 index 7a8151f..0000000 --- a/15-ternary-operator.js +++ /dev/null @@ -1,2 +0,0 @@ -let isRaining = true; -isRaining ? console.log("You need a rain coat.") : console.log("No need for a rain coat."); diff --git a/16-1.0-array.js b/16-1.0-array.js deleted file mode 100644 index f5fe3e5..0000000 --- a/16-1.0-array.js +++ /dev/null @@ -1,37 +0,0 @@ -const webTechs = [ - "HTML", - "CSS", - "JavaScript", - "React", - "Redux", - "Node", - "MongoDB" -]; -const countries = [ - "Albania", - "Bolivia", - "Canada", - "Denmark", - "Ethiopia", - "Finland", - "Germany", - "Hungary" -]; -const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; -const shoppingCart = [ - "Milk", - "Mango", - "Tomato", - "Potato", - "Avocado", - "Meat", - "Eggs", - "Sugar" -]; -console.log(webTechs); -console.log(webTechs.length); // => to know the size of the array, which is 7 -console.log(webTechs[0]); //--> HTML; -console.log(webTechs[webTechs.length - 1]); //--> MongoDB -console.log(countries); -console.log(numbers); -console.log(shoppingCart); diff --git a/data/melina_trump_speech.txt b/data/melina_trump_speech.txt new file mode 100755 index 0000000..06ec1de --- /dev/null +++ b/data/melina_trump_speech.txt @@ -0,0 +1,33 @@ +Thank you very much. Thank you. You have all been very kind to Donald and me, to our young son Barron, and to our whole family. It's a very nice welcome and we're excited to be with you at this historic convention. I am so proud of your choice for president of the United States, my husband, Donald J. Trump. + +And I can assure you, he is moved by this great honor. The 2016 Republican primaries were fierce and started with many candidates, 17 to be exact, and I know that Donald agrees with me when I mention how talented all of them are. They deserve respect and gratitude from all of us. + +However, when it comes to my husband, I will say that I am definitely biased, and for good reason. + +I have been with Donald for 18 years and I have been aware of his love for this country since we first met. He never had a hidden agenda when it comes to his patriotism, because, like me, he loves this country so much. I was born in Slovenia, a small, beautiful and then-communist country in Central Europe. My sister Ines, who is an incredible woman and a friend, and I were raised by my wonderful parents. My elegant and hard-working mother Amalia introduced me to fashion and beauty. My father Viktor instilled in me a passion for business and travel. Their integrity, compassion and intelligence reflects to this day on me and for my love of family and America. + +From a young age, my parents impressed on me the values that you work hard for what you want in life; that your word is your bond and you do what you say and keep your promise; that you treat people with respect. They taught and showed me values and morals in their daily life. That is a lesson that I continue to pass along to our son, and we need to pass those lessons on to the many generations to follow. Because we want our children in this nation to know that the only limit to your achievements is the strength of your dreams and your willingness to work for them. + +I am fortunate for my heritage, but also for where it brought me today. I traveled the world while working hard in the incredible arena of fashion. After living and working in Milan and Paris, I arrived in New York City 20 years ago, and I saw both the joys and the hardships of daily life. On July 28, 2006, I was very proud to become a citizen of the United States — the greatest privilege on planet Earth. I cannot, or will not, take the freedoms this country offers for granted. But these freedoms have come with a price so many times. The sacrifices made by our veterans are reminders to us of this. I would like to take this moment to recognize an amazing veteran, the great Sen. Bob Dole. And let us thank all of our veterans in the arena today, and those across our great country. We are all truly blessed to be here. That will never change. + +I can tell you with certainty that my husband has been concerned about our country for as long as I have known him. With all of my heart, I know that he will make a great and lasting difference. Donald has a deep and unbounding determination and a never-give-up attitude. I have seen him fight for years to get a project done — or even started — and he does not give up! If you want someone to fight for you and your country, I can assure you, he is the "guy." + +He will never, ever, give up. And, most importantly, he will never, ever, let you down. Donald is, and always has been, an amazing leader. Now, he will go to work for you. His achievements speak for themselves, and his performance throughout the primary campaign proved that he knows how to win. He also knows how to remain focused on improving our country — on keeping it safe and secure. He is tough when he has to be but he is also kind and fair and caring. This kindness is not always noted, but it is there for all to see. That is one reason I fell in love with him to begin with. + +Donald is intensely loyal. To family, friends, employees, country. He has the utmost respect for his parents, Mary and Fred, to his sisters Maryanne and Elizabeth, to his brother Robert and to the memory of his late brother Fred. His children have been cared for and mentored to the extent that even his adversaries admit they are an amazing testament to who he is as a man and a father. There is a great deal of love in the Trump family. That is our bond, and that is our strength. + +Yes, Donald thinks big, which is especially important when considering the presidency of the United States. No room for small thinking. No room for small results. Donald gets things done. + +Our country is underperforming and needs new leadership. Leadership is also what the world needs. Donald wants our country to move forward in the most positive of ways. Everyone wants change. Donald is the only one that can deliver it. We should not be satisfied with stagnation. Donald wants prosperity for all Americans. We need new programs to help the poor and opportunities to challenge the young. There has to be a plan for growth — only then will fairness result. + +My husband's experience exemplifies growth and successful passage of opportunity to the next generation. His success indicates inclusion rather than division. My husband offers a new direction, welcoming change, prosperity and greater cooperation among peoples and nations. Donald intends to represent all the people, not just some of the people. That includes Christians and Jews and Muslims, it includes Hispanics and African Americans and Asians, and the poor and the middle-class. Throughout his career, Donald has successfully worked with people of many faiths and with many nations. + +Like no one else, I have seen the talent, the energy, the tenacity, the resourceful mind, and the simple goodness of heart that God gave to Donald Trump. Now is the time to use those gifts as never before, for purposes far greater than ever before. And he will do this better than anyone else can — and it won't even be close. Everything depends on it, for our cause and for our country. + +People are counting on him — all the millions of you who have touched us so much with your kindness and your confidence. You have turned this unlikely campaign into a movement that is still gaining in strength and number. The primary season, and its toughness, is behind us. Let's all come together in a national campaign like no other. + +The race will be hard-fought, all the way to November. There will be good times and hard times and unexpected turns — it would not be a Trump contest without excitement and drama. But through it all, my husband will remain focused on only one thing: this beautiful country, that he loves so much. + +If I am honored to serve as first lady, I will use that wonderful privilege to try to help people in our country who need it the most. One of the many causes dear to my heart is helping children and women. You judge a society by how it treats its citizens. We must do our best to ensure that every child can live in comfort and security, with the best possible education. As citizens of this great nation, it is kindness, love, and compassion for each other that will bring us together — and keep us together. These are the values Donald and I will bring to the White House. My husband is ready to lead this great nation. He is ready to fight, every day, to give our children the better future they deserve. Ladies and gentlemen, Donald J. Trump is ready to serve and lead this country as the next president of the United States. + +Thank you, God bless you, and God bless America. \ No newline at end of file diff --git a/data/michelle_obama_speech.txt b/data/michelle_obama_speech.txt new file mode 100755 index 0000000..bc59c1b --- /dev/null +++ b/data/michelle_obama_speech.txt @@ -0,0 +1,83 @@ +As you might imagine, for Barack, running for president is nothing compared to that first game of basketball with my brother, Craig. + +I can't tell you how much it means to have Craig and my mom here tonight. Like Craig, I can feel my dad looking down on us, just as I've felt his presence in every grace-filled moment of my life. + +At 6-foot-6, I've often felt like Craig was looking down on me too ... literally. But the truth is, both when we were kids and today, he wasn't looking down on me. He was watching over me. + +And he's been there for me every step of the way since that clear February day 19 months ago, when — with little more than our faith in each other and a hunger for change — we joined my husband, Barack Obama, on the improbable journey that's brought us to this moment. + +But each of us also comes here tonight by way of our own improbable journey. + +I come here tonight as a sister, blessed with a brother who is my mentor, my protector and my lifelong friend. + +I come here as a wife who loves my husband and believes he will be an extraordinary president. + +I come here as a mom whose girls are the heart of my heart and the center of my world — they're the first thing I think about when I wake up in the morning, and the last thing I think about when I go to bed at night. Their future — and all our children's future — is my stake in this election. + +And I come here as a daughter — raised on the South Side of Chicago by a father who was a blue-collar city worker and a mother who stayed at home with my brother and me. My mother's love has always been a sustaining force for our family, and one of my greatest joys is seeing her integrity, her compassion and her intelligence reflected in my own daughters. + +My dad was our rock. Although he was diagnosed with multiple sclerosis in his early 30s, he was our provider, our champion, our hero. As he got sicker, it got harder for him to walk, it took him longer to get dressed in the morning. But if he was in pain, he never let on. He never stopped smiling and laughing — even while struggling to button his shirt, even while using two canes to get himself across the room to give my mom a kiss. He just woke up a little earlier and worked a little harder. + +He and my mom poured everything they had into me and Craig. It was the greatest gift a child can receive: never doubting for a single minute that you're loved, and cherished, and have a place in this world. And thanks to their faith and hard work, we both were able to go on to college. So I know firsthand from their lives — and mine — that the American dream endures. + +And you know, what struck me when I first met Barack was that even though he had this funny name, even though he'd grown up all the way across the continent in Hawaii, his family was so much like mine. He was raised by grandparents who were working-class folks just like my parents, and by a single mother who struggled to pay the bills just like we did. Like my family, they scrimped and saved so that he could have opportunities they never had themselves. And Barack and I were raised with so many of the same values: that you work hard for what you want in life; that your word is your bond and you do what you say you're going to do; that you treat people with dignity and respect, even if you don't know them, and even if you don't agree with them. + +And Barack and I set out to build lives guided by these values, and pass them on to the next generation. Because we want our children — and all children in this nation — to know that the only limit to the height of your achievements is the reach of your dreams and your willingness to work for them. + +And as our friendship grew, and I learned more about Barack, he introduced me to the work he'd done when he first moved to Chicago after college. Instead of heading to Wall Street, Barack had gone to work in neighborhoods devastated when steel plants shut down and jobs dried up. And he'd been invited back to speak to people from those neighborhoods about how to rebuild their community. + +The people gathered together that day were ordinary folks doing the best they could to build a good life. They were parents living paycheck to paycheck; grandparents trying to get by on a fixed income; men frustrated that they couldn't support their families after their jobs disappeared. Those folks weren't asking for a handout or a shortcut. They were ready to work — they wanted to contribute. They believed — like you and I believe — that America should be a place where you can make it if you try. + +Barack stood up that day, and spoke words that have stayed with me ever since. He talked about "The world as it is" and "The world as it should be." And he said that all too often, we accept the distance between the two, and settle for the world as it is — even when it doesn't reflect our values and aspirations. But he reminded us that we know what our world should look like. We know what fairness and justice and opportunity look like. And he urged us to believe in ourselves — to find the strength within ourselves to strive for the world as it should be. And isn't that the great American story? + +It's the story of men and women gathered in churches and union halls, in town squares and high school gyms — people who stood up and marched and risked everything they had — refusing to settle, determined to mold our future into the shape of our ideals. + +It is because of their will and determination that this week, we celebrate two anniversaries: the 88th anniversary of women winning the right to vote, and the 45th anniversary of that hot summer day when [Dr. Martin Luther King Jr.] lifted our sights and our hearts with his dream for our nation. + +I stand here today at the crosscurrents of that history — knowing that my piece of the American dream is a blessing hard won by those who came before me. All of them driven by the same conviction that drove my dad to get up an hour early each day to painstakingly dress himself for work. The same conviction that drives the men and women I've met all across this country: + +People who work the day shift, kiss their kids goodnight, and head out for the night shift — without disappointment, without regret — that goodnight kiss a reminder of everything they're working for. + +The military families who say grace each night with an empty seat at the table. The servicemen and women who love this country so much, they leave those they love most to defend it. + +The young people across America serving our communities — teaching children, cleaning up neighborhoods, caring for the least among us each and every day. + +People like Hillary Clinton, who put those 18 million cracks in the glass ceiling, so that our daughters — and sons — can dream a little bigger and aim a little higher. + +People like Joe Biden, who's never forgotten where he came from and never stopped fighting for folks who work long hours and face long odds and need someone on their side again. + +All of us driven by a simple belief that the world as it is just won't do — that we have an obligation to fight for the world as it should be. + +That is the thread that connects our hearts. That is the thread that runs through my journey and Barack's journey and so many other improbable journeys that have brought us here tonight, where the current of history meets this new tide of hope. + +That is why I love this country. + +And in my own life, in my own small way, I've tried to give back to this country that has given me so much. That's why I left a job at a law firm for a career in public service, working to empower young people to volunteer in their communities. Because I believe that each of us — no matter what our age or background or walk of life — each of us has something to contribute to the life of this nation. + +It's a belief Barack shares — a belief at the heart of his life's work. + +It's what he did all those years ago, on the streets of Chicago, setting up job training to get people back to work and after-school programs to keep kids safe — working block by block to help people lift up their families. + +It's what he did in the Illinois Senate, moving people from welfare to jobs, passing tax cuts for hard-working families, and making sure women get equal pay for equal work. + +It's what he's done in the United States Senate, fighting to ensure the men and women who serve this country are welcomed home not just with medals and parades but with good jobs and benefits and health care — including mental health care. + +That's why he's running — to end the war in Iraq responsibly, to build an economy that lifts every family, to make health care available for every American, and to make sure every child in this nation gets a world class education all the way from preschool to college. That's what Barack Obama will do as president of the United States of America. + +He'll achieve these goals the same way he always has — by bringing us together and reminding us how much we share and how alike we really are. You see, Barack doesn't care where you're from, or what your background is, or what party — if any — you belong to. That's not how he sees the world. He knows that thread that connects us — our belief in America's promise, our commitment to our children's future — is strong enough to hold us together as one nation even when we disagree. + +It was strong enough to bring hope to those neighborhoods in Chicago. + +It was strong enough to bring hope to the mother he met worried about her child in Iraq; hope to the man who's unemployed, but can't afford gas to find a job; hope to the student working nights to pay for her sister's health care, sleeping just a few hours a day. + +And it was strong enough to bring hope to people who came out on a cold Iowa night and became the first voices in this chorus for change that's been echoed by millions of Americans from every corner of this nation. + +Millions of Americans who know that Barack understands their dreams; that Barack will fight for people like them; and that Barack will finally bring the change we need. + +And in the end, after all that's happened these past 19 months, the Barack Obama I know today is the same man I fell in love with 19 years ago. He's the same man who drove me and our new baby daughter home from the hospital 10 years ago this summer, inching along at a snail's pace, peering anxiously at us in the rearview mirror, feeling the whole weight of her future in his hands, determined to give her everything he'd struggled so hard for himself, determined to give her what he never had: the affirming embrace of a father's love. + +And as I tuck that little girl and her little sister into bed at night, I think about how one day, they'll have families of their own. And one day, they — and your sons and daughters — will tell their own children about what we did together in this election. They'll tell them how this time, we listened to our hopes, instead of our fears. How this time, we decided to stop doubting and to start dreaming. How this time, in this great country — where a girl from the South Side of Chicago can go to college and law school, and the son of a single mother from Hawaii can go all the way to the White House – we committed ourselves to building the world as it should be. + +So tonight, in honor of my father's memory and my daughters' future — out of gratitude to those whose triumphs we mark this week, and those whose everyday sacrifices have brought us to this moment — let us devote ourselves to finishing their work; let us work together to fulfill their hopes; and let us stand together to elect Barack Obama president of the United States of America. + +Thank you, God bless you, and God bless America. \ No newline at end of file diff --git a/images/adding_project_to_vscode.png b/images/adding_project_to_vscode.png new file mode 100644 index 0000000..1935860 Binary files /dev/null and b/images/adding_project_to_vscode.png differ diff --git a/images/arithmetic.png b/images/arithmetic.png new file mode 100644 index 0000000..9830916 Binary files /dev/null and b/images/arithmetic.png differ diff --git a/images/array_index.png b/images/array_index.png new file mode 100644 index 0000000..355324e Binary files /dev/null and b/images/array_index.png differ diff --git a/images/assignment_operators.png b/images/assignment_operators.png new file mode 100644 index 0000000..99d51d2 Binary files /dev/null and b/images/assignment_operators.png differ diff --git "a/images/banners/Day -1 \342\200\223 31.png" "b/images/banners/Day -1 \342\200\223 31.png" new file mode 100644 index 0000000..d9a9639 Binary files /dev/null and "b/images/banners/Day -1 \342\200\223 31.png" differ diff --git a/images/banners/day_1_1.png b/images/banners/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/images/banners/day_1_1.png differ diff --git a/images/banners/day_1_10.png b/images/banners/day_1_10.png new file mode 100644 index 0000000..e063dec Binary files /dev/null and b/images/banners/day_1_10.png differ diff --git a/images/banners/day_1_11.png b/images/banners/day_1_11.png new file mode 100644 index 0000000..0c2d60b Binary files /dev/null and b/images/banners/day_1_11.png differ diff --git a/images/banners/day_1_12.png b/images/banners/day_1_12.png new file mode 100644 index 0000000..232ac85 Binary files /dev/null and b/images/banners/day_1_12.png differ diff --git a/images/banners/day_1_13.png b/images/banners/day_1_13.png new file mode 100644 index 0000000..488f522 Binary files /dev/null and b/images/banners/day_1_13.png differ diff --git a/images/banners/day_1_14.png b/images/banners/day_1_14.png new file mode 100644 index 0000000..4c5a568 Binary files /dev/null and b/images/banners/day_1_14.png differ diff --git a/images/banners/day_1_15.png b/images/banners/day_1_15.png new file mode 100644 index 0000000..e3013f6 Binary files /dev/null and b/images/banners/day_1_15.png differ diff --git a/images/banners/day_1_16.png b/images/banners/day_1_16.png new file mode 100644 index 0000000..d116060 Binary files /dev/null and b/images/banners/day_1_16.png differ diff --git a/images/banners/day_1_17.png b/images/banners/day_1_17.png new file mode 100644 index 0000000..69cf7ae Binary files /dev/null and b/images/banners/day_1_17.png differ diff --git a/images/banners/day_1_18.png b/images/banners/day_1_18.png new file mode 100644 index 0000000..8b69340 Binary files /dev/null and b/images/banners/day_1_18.png differ diff --git a/images/banners/day_1_19.png b/images/banners/day_1_19.png new file mode 100644 index 0000000..2a785c9 Binary files /dev/null and b/images/banners/day_1_19.png differ diff --git a/images/banners/day_1_2.png b/images/banners/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/images/banners/day_1_2.png differ diff --git a/images/banners/day_1_20.png b/images/banners/day_1_20.png new file mode 100644 index 0000000..befe1fc Binary files /dev/null and b/images/banners/day_1_20.png differ diff --git a/images/banners/day_1_21.png b/images/banners/day_1_21.png new file mode 100644 index 0000000..634d1eb Binary files /dev/null and b/images/banners/day_1_21.png differ diff --git a/images/banners/day_1_22.png b/images/banners/day_1_22.png new file mode 100644 index 0000000..81e33d9 Binary files /dev/null and b/images/banners/day_1_22.png differ diff --git a/images/banners/day_1_23.png b/images/banners/day_1_23.png new file mode 100644 index 0000000..ceb0321 Binary files /dev/null and b/images/banners/day_1_23.png differ diff --git a/images/banners/day_1_24.png b/images/banners/day_1_24.png new file mode 100644 index 0000000..9c8ec46 Binary files /dev/null and b/images/banners/day_1_24.png differ diff --git a/images/banners/day_1_25.png b/images/banners/day_1_25.png new file mode 100644 index 0000000..60a211e Binary files /dev/null and b/images/banners/day_1_25.png differ diff --git a/images/banners/day_1_26.png b/images/banners/day_1_26.png new file mode 100644 index 0000000..f187f2c Binary files /dev/null and b/images/banners/day_1_26.png differ diff --git a/images/banners/day_1_27.png b/images/banners/day_1_27.png new file mode 100644 index 0000000..8637069 Binary files /dev/null and b/images/banners/day_1_27.png differ diff --git a/images/banners/day_1_28.png b/images/banners/day_1_28.png new file mode 100644 index 0000000..1858aca Binary files /dev/null and b/images/banners/day_1_28.png differ diff --git a/images/banners/day_1_29.png b/images/banners/day_1_29.png new file mode 100644 index 0000000..959ee36 Binary files /dev/null and b/images/banners/day_1_29.png differ diff --git a/images/banners/day_1_3.png b/images/banners/day_1_3.png new file mode 100644 index 0000000..1268d2c Binary files /dev/null and b/images/banners/day_1_3.png differ diff --git a/images/banners/day_1_30.png b/images/banners/day_1_30.png new file mode 100644 index 0000000..18a77c4 Binary files /dev/null and b/images/banners/day_1_30.png differ diff --git a/images/banners/day_1_4.png b/images/banners/day_1_4.png new file mode 100644 index 0000000..d5262c6 Binary files /dev/null and b/images/banners/day_1_4.png differ diff --git a/images/banners/day_1_5.png b/images/banners/day_1_5.png new file mode 100644 index 0000000..21bc08c Binary files /dev/null and b/images/banners/day_1_5.png differ diff --git a/images/banners/day_1_6.png b/images/banners/day_1_6.png new file mode 100644 index 0000000..dbea5fd Binary files /dev/null and b/images/banners/day_1_6.png differ diff --git a/images/banners/day_1_7.png b/images/banners/day_1_7.png new file mode 100644 index 0000000..eff8dac Binary files /dev/null and b/images/banners/day_1_7.png differ diff --git a/images/banners/day_1_8.png b/images/banners/day_1_8.png new file mode 100644 index 0000000..ddf9007 Binary files /dev/null and b/images/banners/day_1_8.png differ diff --git a/images/banners/day_1_9.png b/images/banners/day_1_9.png new file mode 100644 index 0000000..1cf688b Binary files /dev/null and b/images/banners/day_1_9.png differ diff --git a/images/become_patreon.png b/images/become_patreon.png new file mode 100644 index 0000000..7de852e Binary files /dev/null and b/images/become_patreon.png differ diff --git a/images/comparison_operators.png b/images/comparison_operators.png new file mode 100644 index 0000000..26ccb91 Binary files /dev/null and b/images/comparison_operators.png differ diff --git a/images/console_log_multipl_arguments.png b/images/console_log_multipl_arguments.png new file mode 100644 index 0000000..f324a90 Binary files /dev/null and b/images/console_log_multipl_arguments.png differ diff --git a/images/date_time_object.png b/images/date_time_object.png new file mode 100644 index 0000000..c5297c7 Binary files /dev/null and b/images/date_time_object.png differ diff --git a/images/day_1.png b/images/day_1.png new file mode 100644 index 0000000..7daf57f Binary files /dev/null and b/images/day_1.png differ diff --git a/images/day_1_1.png b/images/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/images/day_1_1.png differ diff --git a/images/download_node.png b/images/download_node.png new file mode 100644 index 0000000..f290b20 Binary files /dev/null and b/images/download_node.png differ diff --git a/images/google_chrome.png b/images/google_chrome.png new file mode 100644 index 0000000..af06acd Binary files /dev/null and b/images/google_chrome.png differ diff --git a/images/install_node.png b/images/install_node.png new file mode 100644 index 0000000..e5aecf1 Binary files /dev/null and b/images/install_node.png differ diff --git a/images/javascript_for_everyone.png b/images/javascript_for_everyone.png new file mode 100644 index 0000000..ab02a67 Binary files /dev/null and b/images/javascript_for_everyone.png differ diff --git a/images/js_code_on_chrome_console.png b/images/js_code_on_chrome_console.png new file mode 100644 index 0000000..7d6002c Binary files /dev/null and b/images/js_code_on_chrome_console.png differ diff --git a/images/js_code_vscode.png b/images/js_code_vscode.png new file mode 100644 index 0000000..6e1a661 Binary files /dev/null and b/images/js_code_vscode.png differ diff --git a/images/launched_on_new_tab.png b/images/launched_on_new_tab.png new file mode 100644 index 0000000..ed377dc Binary files /dev/null and b/images/launched_on_new_tab.png differ diff --git a/images/local_storage.png b/images/local_storage.png new file mode 100644 index 0000000..0876852 Binary files /dev/null and b/images/local_storage.png differ diff --git a/images/multiple_script.png b/images/multiple_script.png new file mode 100644 index 0000000..caa067f Binary files /dev/null and b/images/multiple_script.png differ diff --git a/images/opening_chrome_console_shortcut.png b/images/opening_chrome_console_shortcut.png new file mode 100644 index 0000000..eace03f Binary files /dev/null and b/images/opening_chrome_console_shortcut.png differ diff --git a/images/opening_developer_tool.png b/images/opening_developer_tool.png new file mode 100644 index 0000000..6eb33dd Binary files /dev/null and b/images/opening_developer_tool.png differ diff --git a/images/opening_project_on_vscode.png b/images/opening_project_on_vscode.png new file mode 100644 index 0000000..908c8fd Binary files /dev/null and b/images/opening_project_on_vscode.png differ diff --git a/images/paypal_lg.png b/images/paypal_lg.png new file mode 100644 index 0000000..cc2a45a Binary files /dev/null and b/images/paypal_lg.png differ diff --git a/images/raising_syntax_error.png b/images/raising_syntax_error.png new file mode 100644 index 0000000..81f6245 Binary files /dev/null and b/images/raising_syntax_error.png differ diff --git a/images/regex.png b/images/regex.png new file mode 100644 index 0000000..c7116b4 Binary files /dev/null and b/images/regex.png differ diff --git a/images/running_script.png b/images/running_script.png new file mode 100644 index 0000000..deac13d Binary files /dev/null and b/images/running_script.png differ diff --git a/images/scripts_on_vscode.png b/images/scripts_on_vscode.png new file mode 100644 index 0000000..f6257be Binary files /dev/null and b/images/scripts_on_vscode.png differ diff --git a/images/string_indexes.png b/images/string_indexes.png new file mode 100644 index 0000000..cc2f638 Binary files /dev/null and b/images/string_indexes.png differ diff --git a/images/vscode.png b/images/vscode.png new file mode 100644 index 0000000..724fc10 Binary files /dev/null and b/images/vscode.png differ diff --git a/images/vscode_ui.png b/images/vscode_ui.png new file mode 100644 index 0000000..7210a08 Binary files /dev/null and b/images/vscode_ui.png differ diff --git a/readMe.md b/readMe.md index efbb05c..ab8a68b 100644 --- a/readMe.md +++ b/readMe.md @@ -1,37 +1,240 @@ -# JavaScript for Everyone - - - -## Table of Contents - -1. [Introduction](#introduction) -2. [Setup](#setup) -3. [Variables](#variables) -4. [Data Types](#data-types) -5. [Operators](#operators) -6. [Conditionals](#conditionals) -7. [Arrays](#arrays) -8. [Loops](#loops) -9. [Functions](#functions) -10. [Scope](#scope) -11. [Hoisting](#Hoisting) -12. [Object](#object) -13. [Document Object Model](#document-object-model) -14. [Class](#class) -15. [Call Back and Higher Order Functions](#call-back-and-higher-order-functions) -16. [Functional Programming](#functional-programming) -17. [Destructuring](#destructuring) -18. [Rest and Spread](#rest-and-spread) -19. [Regular Expressions](#regular-expressions) -20. [Local Storage](#local-storage) -21. [Cookies](#cookies) +
+ + + + +- [Introduction](#introduction) +- [Setup](#setup) +- [Requirements](#requirements) +- [Setup](#setup-1) + - [Install Node.js](#install-nodejs) + - [Browser](#browser) + - [Installing Google Chrome](#installing-google-chrome) + - [Opening Google Chrome Console](#opening-google-chrome-console) + - [Writing Code on browser Console](#writing-code-on-browser-console) + - [Console.log](#consolelog) + - [Console.log with multiple arguments](#consolelog-with-multiple-arguments) + - [Comment](#comment) + - [Syntax](#syntax) + - [Arithmetics](#arithmetics) + - [Code Editor](#code-editor) + - [Installing Visual Studio Code](#installing-visual-studio-code) + - [How to use visual studio code](#how-to-use-visual-studio-code) + - [Adding JavaScript to a web page](#adding-javascript-to-a-web-page) + - [Inline Script](#inline-script) + - [Internal script](#internal-script) + - [External script](#external-script) + - [Exercises:Setting Up your machine](#exercisessetting-up-your-machine) +- [Variables](#variables) + - [Exercise - 1 : Variables](#exercise---1--variables) +- [Comments](#comments) + - [Exercise: Comments](#exercise-comments) +- [Data types](#data-types) + - [Primitive Data Types](#primitive-data-types) + - [Non-Primitive Data Types](#non-primitive-data-types) +- [Numbers](#numbers) + - [Declaring number data types](#declaring-number-data-types) + - [Math Object](#math-object) + - [Random number generator](#random-number-generator) +- [Strings](#strings) + - [String Concatenation](#string-concatenation) + - [Concatenating using addition operator](#concatenating-using-addition-operator) + - [Long Literal Strings](#long-literal-strings) + - [Escape Sequences in string](#escape-sequences-in-string) + - [Template Literals(Template Strings)](#template-literalstemplate-strings) + - [String Methods](#string-methods) +- [Checking Data types and Casting](#checking-data-types-and-casting) + - [Checking data types](#checking-data-types) + - [Changing data type(Casting)](#changing-data-typecasting) + - [String to Int](#string-to-int) + - [String to Float](#string-to-float) + - [Float to Int](#float-to-int) + - [Exercises: Data Types](#exercises-data-types) + - [Exercise: String](#exercise-string) + - [Booleans](#booleans) + - [Exercise: Booleans](#exercise-booleans) + - [Undefined](#undefined) + - [Null](#null) + - [Exercise - 6 : Data types](#exercise---6--data-types) +- [Operators](#operators) + - [Arithmetic Operators](#arithmetic-operators) + - [Exercises : Arithmetic Operators](#exercises--arithmetic-operators) + - [Logical Operators](#logical-operators) + - [Exercises: Logical Operators](#exercises-logical-operators) + - [Comparison Operators](#comparison-operators) + - [Exercise: Comparison Operators](#exercise-comparison-operators) +- [Conditionals](#conditionals) + - [if](#if) + - [if else](#if-else) + - [if else if else](#if-else-if-else) + - [switch](#switch) + - [Ternary Operators](#ternary-operators) + - [Exercise: Conditionals](#exercise-conditionals) + - [While loop](#while-loop) + - [Do while loop](#do-while-loop) + - [Exercises:Loops](#exercisesloops) +- [Arrays](#arrays) + - [Exercise : Arrays](#exercise--arrays) +- [More on Arrays](#more-on-arrays) + - [Exercise -10 : Array Methods](#exercise--10--array-methods) +- [Functions](#functions) + - [Function Declaration](#function-declaration) + - [Function Expression](#function-expression) + - [Anonymous Function](#anonymous-function) + - [Arrow Function](#arrow-function) + - [Arrow Function vs Declaration Function](#arrow-function-vs-declaration-function) + - [Exercise - 10 : Functions](#exercise---10--functions) +- [Object](#object) + - [Object Methods](#object-methods) + - [Date Object](#date-object) + - [Exercises: Date Object](#exercises-date-object) + - [Exercises:Objects](#exercisesobjects) +- [JSON](#json) + - [Converting JSON to JavaScript Object](#converting-json-to-javascript-object) + - [JSON.parse()](#jsonparse) + - [Using a reviver function with JSON.parse()](#using-a-reviver-function-with-jsonparse) + - [Converting Object to JSON](#converting-object-to-json) + - [Using a Filter Array with JSON.stringify](#using-a-filter-array-with-jsonstringify) + - [Exercises](#exercises) + - [Exercises Level 1](#exercises-level-1) + - [Exercises Level 2](#exercises-level-2) +- [Higher Order Function](#higher-order-function) + - [Callback](#callback) + - [Returning function](#returning-function) + - [setting time](#setting-time) + - [setInterval](#setinterval) + - [setTimeout](#settimeout) + - [Exercises Level 3](#exercises-level-3) +- [Functional Programming](#functional-programming) + - [Exercises](#exercises-1) +- [Destructuring and Spread](#destructuring-and-spread) + - [Destructing Arrays](#destructing--arrays) + - [Destructuring Object](#destructuring-object) + - [Renaming during structuring](#renaming-during-structuring) + - [Spread or Rest Operator](#spread-or-rest-operator) + - [Exercise: Destructuring](#exercise-destructuring) +- [Map and Set](#map-and-set) +- [Set](#set) + - [Creating a set](#creating-a-set) + - [Adding an element to a set](#adding-an-element-to-a-set) + - [Deleting an element a set](#deleting-an-element-a-set) + - [Checking an element in the set](#checking-an-element-in-the-set) + - [Clearing the set](#clearing-the-set) +- [Set](#set-1) + - [Creating an empty set](#creating-an-empty-set) + - [Creating set from array](#creating-set-from-array) + - [Adding an element to a set](#adding-an-element-to-a-set-1) + - [Deleting an element a set](#deleting-an-element-a-set-1) + - [Checking an element in the set](#checking-an-element-in-the-set-1) + - [Clearing the set](#clearing-the-set-1) + - [Union of sets](#union-of-sets) + - [Intersection of sets](#intersection-of-sets) + - [Difference of sets](#difference-of-sets) +- [Map](#map) + - [Creating an empty Map](#creating-an-empty-map) + - [Creating an Map from array](#creating-an-map-from-array) + - [Adding values to the Map](#adding-values-to-the-map) + - [Getting a value from Map](#getting-a-value-from-map) + - [Checking key in Map](#checking-key-in-map) + - [Exercises: Set and Map](#exercises-set-and-map) + - [Exercises:Level 1](#exerciseslevel-1) + - [Exercises:Level 2](#exerciseslevel-2) + - [Exercises:Level 3](#exerciseslevel-3) +- [Document Object Model (DOM)](#document-object-model-dom) + - [Getting Element](#getting-element) + - [Getting elements by tag name](#getting-elements-by-tag-name) + - [Getting elements by class name](#getting-elements-by-class-name) + - [Getting an element by id](#getting-an-element-by-id) + - [Getting elements by using querySelector using tag, class and id:](#getting-elements-by-using-queryselector-using-tag-class-and-id) + - [Adding attribute](#adding-attribute) + - [Adding attribute using setAttribute](#adding-attribute-using-setattribute) + - [Adding attribute without setAttribute](#adding-attribute-without-setattribute) + - [Adding class using classList](#adding-class-using-classlist) + - [Adding Text content](#adding-text-content) + - [Adding style](#adding-style) + - [Creating an Element](#creating-an-element) + - [Creating elements](#creating-elements) + - [Appending to a parent element](#appending-to-a-parent-element) + - [Event Listeners](#event-listeners) + - [Getting value from an input element](#getting-value-from-an-input-element) + - [Exercises:Document Object Model](#exercisesdocument-object-model) + - [DOM: Mini Projects](#dom-mini-projects) +- [Classes](#classes) + - [Defining a classes](#defining-a-classes) + - [Class Instantiation](#class-instantiation) + - [Class Constructor](#class-constructor) + - [Default values with constructor](#default-values-with-constructor) + - [Class methods](#class-methods) + - [Properties with initial value](#properties-with-initial-value) + - [getter](#getter) + - [setter](#setter) + - [Static method](#static-method) +- [Inheritance](#inheritance) + - [Overriding methods](#overriding-methods) +- [Exercises](#exercises-2) + - [Exercises Level 1](#exercises-level-1-1) + - [Exercises Level 2](#exercises-level-2-1) + - [Exercises Level 3](#exercises-level-3-1) +- [Regular Expressions](#regular-expressions) + - [RegEx parameters](#regex-parameters) + - [Pattern](#pattern) + - [Flags](#flags) + - [Creating a pattern with RegEx Constructor](#creating-a-pattern-with-regex-constructor) + - [Creating a pattern without RegEx Constructor](#creating-a-pattern-without-regex-constructor) + - [RegExp Object Methods](#regexp-object-methods) + - [Testing for a match](#testing-for--a-match) + - [Array containing all of the match](#array-containing-all-of-the-match) + - [Replacing a substring](#replacing-a-substring) + - [Square Bracket](#square-bracket) + - [Escape character(\\) in RegEx](#escape-character-in-regex) + - [One or more times(+)](#one-or-more-times) + - [Period(.)](#period) + - [Zero or more times(*)](#zero-or-more-times) + - [Zero or one times(?)](#zero-or-one-times) + - [Quantifier in RegEx](#quantifier-in-regex) + - [Cart ^](#cart-) + - [Exact match](#exact-match) +- [💻 Exercises](#-exercises) + - [Exercises: Level 1](#exercises-level-1-2) + - [Exercises: Level 2](#exercises-level-2-2) + - [Exercises: Level 3](#exercises-level-3-2) +- [Async and Await](#async-and-await) +- [localStorage](#localstorage) + - [Setting item to the localStorage](#setting-item-to-the-localstorage) + - [Getting item from localStorage](#getting-item-from-localstorage) + - [Clearing the localStorage](#clearing-the-localstorage) + - [Exercises:Local Storage](#exerciseslocal-storage) +- [Cookies](#cookies) + - [Exercises:Cookies](#exercisescookies) +- [JavaScript Interview Questions](#javascript-interview-questions) + - [JavaScript Tests](#javascript-tests) + - [JavaScript Test 1](#javascript-test-1) + - [JavaScript Test 2](#javascript-test-2) + - [JavaScript Test 3](#javascript-test-3) ## Introduction -Welcome to JavaScript. **_Congratulations_** for deciding to learn JavaScript. -**_JavaScript for Everone_** is a guide for both beginner and advanced JavaScript developers. +**_JavaScript for Everyone_** is a guide for both beginners and advanced JavaScript developers. Welcome to JavaScript. **_Congratulations_** for deciding to learn JavaScript, the language of the browser. -In this step by step tutorial, I will teach you JavaScript, the most popular programming language in the history of mankind. +In this step by step tutorial, you will learn JavaScript, the most popular programming language in the history of mankind. You use JavaScript **_to add interactivity to websites, to develop mobile apps, desktop applications, games_** and nowadays JavaScript can be used for **_machine learning_** and **_AI_**. **_JavaScript (JS)_** has increased in popularity in recent years and has been the leading programming language for four consecutive years and is the most used programming language on @@ -42,19 +245,211 @@ Github. First thing first, lets install text or code editor. Install code editor, it could be [vscode](https://code.visualstudio.com/), [atom](https://atom.io/), [bracket](http://brackets.io/), [notepad++](https://notepad-plus-plus.org/) or others. I recommend vscode. Install either [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/?v=b) if you didn't have yet. -## Adding JavaScript to a web page -JavaScript can be added to a web pages in three ways: +If you want help, you may join the [telegram](https://t.me/JavaScriptforEveryone) channel. + +## Requirements + +No prior knowledge of programming is required to follow this guide. You need only: + +1. Motivation +2. Computer +3. Internet +4. Browser +5. Code Editor + +## Setup + +I believe you have the motivation and a strong desire to be a developer, computer and Internet. If you have those, then you have everything. + +### Install Node.js + +You may not need it right now but you may need it for later. Install [node.js](https://nodejs.org/en/). + + + +After downloading double click and install + +  + +We can check if node is installed in our local machine by opening our device terminal or command prompt. + +```sh +asabeneh $ node -v +v12.14.0 +``` + +I am using node version 12.14.0, which is the recommended version of node. + +### Browser + +There are many browsers out there. However, I strongly recommend Google Chrome. + +#### Installing Google Chrome + +Install [google chrome](https://www.google.com/chrome/) if you do not have one yet. We can write small JavaScript code on the browser console, but we do not use the browser console to develop applications. + + + +#### Opening Google Chrome Console + +You can open Google Chrome either by clicking three dots at the top right corner of the Chrome browser or using a shortcut. I prefer using shortcuts. + + + +To open the Chrome console using a short cut. + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + + + +After you open the Google Chrome console, try to explore the marked buttons. We will spend most of the time on the Console part. The Console is the place where your JavaScript code goes. The Google Console V8 engine changes your JavaScript code to machine code. +Let us write a JavaScript code on the Google Chrome console: + + + +#### Writing Code on browser Console + +We can write any JavaScript code on the Google console or any browser console. However, for this challenge, we only focus on Google Chrome console. Open the console using: + +```sh +Mac +Command+Option+I + +Windows: +Ctl+Shift+I +``` + +##### Console.log + +To write our first JavaScript code, we used a builtin function **console.log()**. We passed an argument as input data, and the function displays the output. We passed 'Hello, World' as input data or argument in the console.log() function. + +```js +console.log('Hello, World!') +``` + +##### Console.log with multiple arguments + +The console.log(param1, param2, param3), can take multiple arguments. + + + +```js +console.log('Hello', 'World', '!') +console.log('HAPPY', 'NEW', 'YEAR', 2020) +console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript') +``` + +As you can see from the above snippet code, *console.log()* can take multiple arguments. + +Congratulations! You wrote your first JavaScript code using *console.log()*. + +##### Comment + +We add comments to our code. Comments are very important to make code more readable and to leave remarks in our code. JavaScript does not execute the comment part of our code. Any text starts with // in JavaScript is a comment or anything enclose like this /* */ is a comment. + +**Example: Single Line Comment** + + // This is the first comment + // This is the second comment + // I am a single line comment + +**Example: Multiline Comment** + + /* + This is a multiline comment + Multiline comments can take multiple lines + JavaScript is the language of the web + */ + +##### Syntax + +JavaScript is a programming language. As a result, it has its syntax like other programming languages. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors. + + + +I made a deliberate mistake. As a result, the console raises a syntax error. Actually, the syntax is very informative. It informs what type of mistake we made. By reading the error feedback guideline, we can correct the syntax and fix the problem. The process of identifying and removing errors from a program is called debugging. Let us fix the errors: + +```js +console.log("Hello, World!") +console.log('Hello, World!') +``` + +So far, we saw how to display text using a *console.log()*. If we are printing text or string using *console.log()*, the text has to be under the single, double, or backtick. +**Example:** + +```js +console.log("Hello, World!") +console.log('Hello, World!') +console.log(`Hello, World!`) +``` + +#### Arithmetics + +Now, let us practice more writing JavaScript codes using *console.log()* on google chrome console for number data types. +In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations. + + + +```js +console.log(2 + 3) // Addition +console.log(3 - 2) // Subtraction +console.log(2 * 3) // Multiplication +console.log(3 / 2) // Division +console.log(3 % 2) // Modulus - finding remainder +console.log(3 ** 2) // Exponential +``` + +### Code Editor + +We can write our codes on the browser console, but it won't be for bigger projects. In a real working environment, developers use different code editors to write their codes. In this 30 days python JavaScript challenge, we will use visual studio code. + +#### Installing Visual Studio Code + +Visual studio code is a very popular open-source text editor. I would recommend to [download](https://code.visualstudio.com/) visual studio code, but if you are in favor of other editors, feel free to follow with what you have. + + + +If you installed visual studio code, let us start using it. + +#### How to use visual studio code + +Open the visual studio code by double-clicking the visual studio icon. When you open it, you will get this kind of interface. Try to interact with the labeled icons. + + + + + + + + + + + + + + +### Adding JavaScript to a web page + +JavaScript can be added to a web page in three ways: + - **_Inline script_** - **_Internal script_** - **_External script_** -The following sections shows different ways of adding JavaScript code to your web page. -### Inline Script +The following sections show different ways of adding JavaScript code to your web page. + +#### Inline Script -Create a folder on your desktop or in any location and create an **_index.html_** file. Then paste the following code and open it in a browser, either in [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/?v=b). +Create a folder on your desktop or in any location and create an **_index.html_** file in your folder. Then paste the following code and open it in a browser, either in [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/?v=b). ```html -First Paragraph
+Second Paragraph
+Third Paragraph
+ + + +``` + + 1. Create an index.html file and put four p elements as above: Get the first paragraph by using ***document.querySelector(tagname)*** and tag name + 2. Get get each of the the paragraph using ***document.querySelector('#id')*** and by their id + 3. Get all the p as nodeList using ***document.querySelectorAll(tagname)*** and by their tag name + 4. Loop through the nodeList and get the text content of each paragraph + 5. Set a text content to paragraph the fourth paragraph,***Fourth Paragraph*** + 6. Set id and class attribute for all the paragraphs using different attribute setting methods + 7. Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-family) + 8. Select all paragraphs and loop through each elements and give the first and third paragraph a color of color, and the second and the fourth paragraph a red color + 9. Remove all the paragraph and create them using JavaScript + 10. Set text content, id and class to each paragraph + 11. Create a div container on HTML document and create 100 numbers dynamically and append to the container div. Put each number in 150px by 150px box. If the number is even the background will be lightgreen else lightblue. + 12. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors + 13. Use the countries.js to visualize all the countries on the HTML document. You need one wrapper div and box for each countries. In the box display, the letter the country starts with, the name of the country and the number of characters for the country name. + +#### DOM: Mini Projects + +1. BMI calculator +2. Hexadecimal or RGB color Generator +3. World Countries List + +## Classes + +JavaScript is an object oriented programming language. Everything in JavScript is an object, with its properties and methods. We create class to create an object. A Class is like an object constructor, or a "blueprint" for creating objects. We instantiate a class to create an object. The class defines attributes and the behavior of the object, while the object, on the other hand, represents the class. + +Once we create a class we can create object from it whenever we want. Creating an object from a class is called class instantiation. + +In the object section, we saw how to create an object literal. Object literal is a singleton. If we want to get a similar object , we have to write it. However, class allows to create many objects. This helps to reduce amount of code and repetition of code. + +### Defining a classes + +To define a class in JavaScript we need the keyword _class_ , the name of a class in **CamelCase** and block code(two curly brackets). Let us create a class name Person. + +```sh +// syntax +class ClassName { + // code goes here +} + +``` + +**Example:** + +```js +class Person { + // code goes here +} +``` + +We have created an Person class but it does not have any thing inside. + +### Class Instantiation + +Instantiation class means creating an object from a class. We need the keyword _new_ and we call the name of the class after the word new. + +Let us create a dog object from our Person class. + +```js +class Person { + // code goes here +} +const person = new Person() +console.log(person) +``` + +```sh +Person {} +``` + +As you can see, we have created a person object. Since the class did not have any properties yet the object is also empty. + +Let use the class constructor to pass different properties for the class. + +### Class Constructor + +The constructor is a builtin function which allows as to create a blueprint for our object. The constructor function starts with a keyword constructor followed by a parenthesis. Inside the parenthesis we pass the properties of the object as parameter. We use the _this_ keyword to attach the constructor parameters with the class. + +The following Person class constructor has firstName and lastName property. These properties are attached to the Person class using _this_ keyword. _This_ refers to the class itself. + +```js +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName } -}; +} + +const person = new Person() + +console.log(person) +``` + +```sh +Person {firstName: undefined, lastName} +``` + +All the keys of the object are undefined. When ever we instantiate we should pass the value of the properties. Let us pass value at this time when we instantiate the class. + +```js +class Person { + constructor(firstName, lastName) { + this.firstName = firstName + this.lastName = lastName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh') + +console.log(person1) ``` -Getting values from an object: +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh"} +``` + +As we have stated at the very beginning that once we create a class we can create many object using the class. Now, let us create many person objects using the Person class. ```js - const person = { - firstName:'Asabeneh', - lastName:'Yetayeh', - age:100, - location:'Helsinki', - skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js'] - getFullName:function() { - return `${this.firstName}${this.lastName}` - } +class Person { + constructor(firstName, lastName) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName } - console.log(person.firstName); - console.log(person.lastName); - console.log(person.getFullName()); - // value can be accessed - console.log(person['age'); - console.log(person['location']); +} + +const person1 = new Person('Asabeneh', 'Yetayeh') +const person2 = new Person('Lidiya', 'Tekle') +const person3 = new Person('Abraham', 'Yetayeh') + +console.log(person1) +console.log(person2) +console.log(person3) ``` -Setting a new keys in an object +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh"} +Person {firstName: "Lidiya", lastName: "Tekle"} +Person {firstName: "Abraham", lastName: "Yetayeh"} +``` + +Using the class Person we created three persons object. As you can see our class did not many properties let us add more properties to the class. ```js - const person = { - firstName:'Asabeneh', - lastName:'Yetayeh', - age:100, - location:'Helsinki', - skills:['HTML', 'CSS', 'JavaScript', 'React','Node','MongoDB', 'Python', 'D3.js'] - getFullName:function() { - return `${this.firstName}${this.lastName}` - } +class Person { + constructor(firstName, lastName, age, country, city) { + console.log(this) // Check the output from here + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city } - person.nationality = 'Ethiopian' - person.live = 'Finland'; - console.log(person) +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') + +console.log(person1) +``` + +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki"} ``` -### Object Methods: +### Default values with constructor -_Object.assign_: To copy an object without modifying the original object +The constructor function properties may have a default value like other regular functions. ```js -const person = { - name: "Asabeneh", - age: 200, - country: "Finland", - skills: ["HTML", "CSS", "JS"], - address: { - street: "Heitamienkatu 16", - pobox: 2002, - city: "Helsinki" - }, - getPersonInfo: function() { - return `I am ${this.name} and I live in ${this.country}. I am ${this.age}.`; +class Person { + constructor( + firstName = 'Asabeneh', + lastName = 'Yetayeh', + age = 250, + country = 'Finland', + city = 'Helsinki' + ) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city } -}; +} -//Object methods: Object.assign, Object.keys, Object.values, Object.entreis -//hasOwnProperty +const person1 = new Person() // it will take the default values +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') -const copyPerson = Object.assign({}, person); -console.log(copyPerson); +console.log(person1) +console.log(person2) ``` -_Object.keys_: To get keys of an objet as an array +```sh +Person {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki"} +Person {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Espoo"} +``` + +### Class methods + +The constructor inside a class is a builtin function which allow us to create a blueprint for the object. In a class we can create class methods. Methods are JavaScript functions inside the class. Let us create some class methods. ```js -const keys = Object.keys(copyPerson); -console.log(keys); //["name", "age", "country", "skills", "address", "getPersonInfo"] -const address = Object.keys(copyPerson.address); -console.log(address); //["street", "pobox", "city"] +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.getFullName()) +console.log(person2.getFullName()) ``` -_Object.values_:To get values of an object as an array +```sh +Asabeneh Yetayeh +test.js:19 Lidiya Tekle +``` + +### Properties with initial value + +When we create a class for some properties we may have an initial value. For instance if you are playing a game, you starting score will be zero. So, we may have a starting score or score which is zero. In other way, we may have an initial skill and we will acquire some skill after some time. ```js -const values = Object.values(copyPerson); -console.log(values); +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.score) +console.log(person2.score) + +console.log(person1.skills) +console.log(person2.skills) ``` -_Object.entries_:To get the keys and values in an array -```js -const entries = Object.entries(copyPerson); -console.log(entries); +```sh +0 +0 +[] +[] ``` -_hasOwnProperty_: To check if a specific key or property exist in an object +A method could be regular method or a getter or a setter. Let us see, getter and setter. + +### getter + +The get method allow us to access value from the object. We write a get method using keyword _get_ followed by a function. Instead of accessing properties directly from the object we use getter to get the value. See the example bellow ```js -console.log(copyPerson.hasOwnProperty("name")); -console.log(copyPerson.hasOwnProperty("score")); +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getscore() { + return this.score + } + get getSkills() { + return this.skills + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +console.log(person1.getScore) // We do not need parenthesis to call a getter method +console.log(person2.getScore) + +console.log(person1.getSkills) +console.log(person2.getSkills) ``` -### Date Object -In JavaScript current time and date is created using JavaScript Date Object. -Some of the methods to extract date object values:*getFullYear(), getMonths(), getDate(), getDay(), getHours(), getMinutes* -```js -const now = new Date (); -const year = now.getFullYear(); // return year -const month = now.getMonth() + 1; // return month(0 - 11) -const date = now.getDate(); // return date (1 - 31) -const hours = now.getHours(); // return number (0 - 23) -const minutes = now.getMinutes();// return number (0 -59) -console.log(`${date}/${month}/${year} ${hours}:${minutes}`) + +```sh +0 +0 +[] +[] ``` -#### Exercises: -1. Use the new Date() object to get _month, date, year, hour_ and _minute_. -1. Write a function name _displayDateTime_ which display time in this format: 10/03/2019 04:08 - ```sh - displayDateTime() - 10/03/2019 04:08 - ``` -#### Exercises:Objects -1. Create an empty object called dog -1. Print the the dog object on the console -1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return *woof woof* -1. Get name, legs, color, age and bark value from the dog object -1. Set new properties the dog object: breed, getDogInfo -1. Create an object literal called _personAccount_. It has _firstName, lastName, incomes, expenses_ properties and it has _totalIncome, totalExpense, acountInfo,addIncome, addExpence_ and _accountBalance_ methods. Incomes is a set of incomes and its description and the same for expenses. -1. Count logged in users,count users having greater than equal to 50 points from the following object. - ```js - const users = { - Alex: { - email: "alex@alex.com", - skills: ["HTML", "CSS", "JavaScript"], - age: 20, - isLoggedIn: false, - points: 30 - }, - Asab: { - email: "asab@asab.com", - skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"], - age: 25, - isLoggedIn: false, - points: 50 - }, - Brook: { - email: "daniel@daniel.com", - skills: ["HTML", "CSS", "JavaScript", "React", "Redux"], - age: 30, - isLoggedIn: true, - points: 50 - }, - Daniel: { - email: "daniel@alex.com", - skills: ["HTML", "CSS", "JavaScript", "Python"], - age: 20, - isLoggedIn: false, - points: 40 - }, - John: { - email: "john@john.com", - skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"], - age: 20, - isLoggedIn: true, - point: 50 - }, - Thomas: { - email: "thomas@thomas.com", - skills: ["HTML", "CSS", "JavaScript", "React"], - age: 20, - isLoggedIn: false, - points: 40 - } - }; - ``` -1. Set your name in the users object without modifying the original users object -1. Get all keys or properties of users object -1. Get all the values of users object -1. ** Develop a small JavaScript library. -## Functional Programming -*forEach*: Iterate an array elements and use for array. It takes a callback function with elements and index parameter. +### setter + +The setter method allow us to modify the value of certain properties. We write a setter method using keyword _set_ followed by a function. See the example bellow. ```js -arr.forEach(function(element, index){ - console.log(index, element) -}) -// The above code can be written using arrow function -arr.forEach((element, index) => { - console.log(index, element) -}) -// The above code can be written using arrow function and explicit return -arr.forEach((element, index) => console.log(index, element)); +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } +} + +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') + +person1.setScore = 1 +person1.setSkill = 'HTML' +person1.setSkill = 'CSS' +person1.setSkill = 'JavaScript' + +person2.setScore = 1 +person2.setSkill = 'Planning' +person2.setSkill = 'Managing' +person2.setSkill = 'Organizing' + +console.log(person1.score) +console.log(person2.score) + +console.log(person1.skills) +console.log(person2.skills) ``` -*map*: Iterate an array elements and modify the array elements. It takes a callback function with elements and index parameter and return the modified array. -```js -const modifiedArray = arr.map(function(element,index){ - return element -}); -/*Arrow function and explicit return -const modifiedArray = arr.map((element,index) => element); -*/ -//Example -const numbers = [1,2,3,4,5]; -const numbersSquare = numbers.map((num) => num * num) -console.log(numbersSquare) // [1,4,9,16,25] -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const namesToUpperCase = names.map((name) => name.toUpperCase()); -console.log(namesToUpperCase) //["ASABENEH", "MATHIAS", "ELIAS", "BROOK"] -const countries = [ - "Albania", - "Bolivia", - "Canada", - "Denmark", - "Ethiopia", - "Finland", - "Germany", - "Hungary", - "Ireland", - "Japan", - "Kenya" -]; -const countriesToUpperCase = countries.map(function(country){ - return country.toUpperCase(); -}); -console.log(countriesToUpperCase) -// ["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"] -/* -// Arrow function -const countriesToUpperCase = countries.map((country) => { - return country.toUpperCase(); -}) -//Explicit return arrow function -const countriesToUpperCase = countries.map(country => country.toUpperCase()); -*/ + +```sh +1 +1 +["HTML", "CSS", "JavaScript"] +["Planning", "Managing", "Organizing"] ``` -*Filter*: Filter out itmes which full fill filtering conditions + +Do not be puzzled by the difference between regular method and a getter. If you know how to make a regular method you are good. Let us add regular method called getPersonInfo in the Person class. ```js -//Filter countries containing land -const countriesContainingLand = countries.filter(country => country.includes('land')); -console.log(countriesContainingLand ) //["Finland", "Ireland"] -const countriesEndByia = countries.filter(country => country.includes('ia')); -console.log(countriesEndByia) //["Albania", "Bolivia","Ethiopia"] -const countriesHaveFiveLetters = countries.filter(country => country.length === 5); -console.log(countriesHaveFiveLetters ) // ["Japan", "Kenya"] -const scores = [{name:'Asabeneh', score:95},{name:'Mathias', score:80},{name:'Elias', score:50},{name:'Martha', score:85},{name:'John', score:100}]; +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + let formattedSkills = skills ? `He knows ${skills}` : '' + + let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}` + return info + } +} -const scoresGreaterEight = scores.filter((score) => score.score > 80); -console.log(scoresGreaterEight) //[{name: "Asabeneh", score: 95}, {name: "Martha", score: 85},{name: "John", score: 100}] +const person1 = new Person('Asabeneh', 'Yetayeh', 250, 'Finland', 'Helsinki') +const person2 = new Person('Lidiya', 'Tekle', 28, 'Finland', 'Espoo') +const person3 = new Person('John', 'Doe', 50, 'Mars', 'Mars city') + +person1.setScore = 1 +person1.setSkill = 'HTML' +person1.setSkill = 'CSS' +person1.setSkill = 'JavaScript' + +person2.setScore = 1 +person2.setSkill = 'Planning' +person2.setSkill = 'Managing' +person2.setSkill = 'Organizing' + +console.log(person1.getScore) +console.log(person2.getScore) + +console.log(person1.getSkills) +console.log(person2.getSkills) +console.log(person3.getSkills) + +console.log(person1.getPersonInfo()) +console.log(person2.getPersonInfo()) +console.log(person3.getPersonInfo()) ``` -*reduce*: Reduce takes a callback function. The call back function takes accumulator and current value as a parameter and returns a single value: + +```sh +1 +1 +["HTML", "CSS", "JavaScript"] +["Planning", "Managing", "Organizing"] +[] +Asabeneh Yetayeh is 250. He lives Helsinki, Finland. He knows HTML, CSS and JavaScript +Lidiya Tekle is 28. He lives Espoo, Finland. He knows Planning, Managing and Organizing +John Doe is 50. He lives Mars city, Mars. +``` + +### Static method + +The static keyword defines a static method for a class. Static methods are not called on instances of the class. Instead, they are called on the class itself. These are often utility functions, such as functions to create or clone objects. An example of static method is _Date.now()_. The _now_ method is called directly from the class. + ```js - const numbers = [1,2,3,4,5]; - const sum = numbers.reduce((accum, curr)=> accum + curr); - console.log(sum); //15 - +class Person { + constructor(firstName, lastName, age, country, city) { + this.firstName = firstName + this.lastName = lastName + this.age = age + this.country = country + this.city = city + this.score = 0 + this.skills = [] + } + getFullName() { + const fullName = this.firstName + ' ' + this.lastName + return fullName + } + get getScore() { + return this.score + } + get getSkills() { + return this.skills + } + set setScore(score) { + this.score += score + } + set setSkill(skill) { + this.skills.push(skill) + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + + let formattedSkills = skills ? `He knows ${skills}` : '' + + let info = `${fullName} is ${this.age}. He lives ${this.city}, ${this.country}. ${formattedSkills}` + return info + } + static favoriteSkill() { + const skills = ['HTML', 'CSS', 'JS', 'React', 'Python', 'Node'] + const index = Math.floor(Math.random() * skills.length) + return skills[index] + } + static showDateTime() { + let now = new Date() + let year = now.getFullYear() + let month = now.getMonth() + 1 + let date = now.getDate() + let hours = now.getHours() + let minutes = now.getMinutes() + if (hours < 10) { + hours = '0' + hours + } + if (minutes < 10) { + minutes = '0' + minutes + } + + let dateMonthYear = date + '.' + month + '.' + year + let time = hours + ':' + minutes + let fullTime = dateMonthYear + ' ' + time + return fullTime + } +} + +console.log(Person.favoriteSkill()) +console.log(Person.showDateTime()) ``` -*every*: Check if all the elements are similar in one aspect. It returns boolean -```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const bools = [true, true, true, true]; -const result = bools.every((b)=> { - return b === true; -}); -console.log(result) //true -const checkType = names.every((name) => typeof name ==='string'); -console.log(checkDataTypes) // true; + +```sh +Node +15.1.2020 23:56 ``` -*some*: Check if some of the elements are similar in one aspect. It returns boolean +The static methods are methods which can be used as utility functions. + +## Inheritance + +Using inheritance we can access all the properties and the methods of the parent class. This reduces repetition of code. If you remember, we have a Person parent class and we will create children from it. Our children class could be student, teach etc. + ```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const bools = [true, true, true, true]; -const result = bools.some((b)=> { - return b === true; -}); -console.log(result) //true -const checkType = names.some((name) => typeof name ==='number'); -console.log(checkDataTypes) // false +// syntax +class ChildClassName extends { + // code goes here +} ``` -*find*: Return the first element which satisfies the condition + +Let us create a Student child class from Person parent class. + ```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const ages = [24, 22,25,32,35,18]; -const result = names.find(name => name.length > 7); -console.log(result) // Asabeneh -const age = ages.find((age) => age < 20); -console.log(age) // 18 +class Student extends Person { + saySomething() { + console.log('I am a child of the person class') + } +} + +const s1 = new Student('Asabeneh', 'Yetayeh', 'Finland', 250, 'Helsinki') +console.log(s1) +console.log(s1.saySomething()) +console.log(s1.getFullName()) +console.log(s1.getPersonInfo()) ``` -*findIndex*: Return the position of the first element which satisfies the condition -```js -const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; -const ages = [24, 22,25,32,35,18]; -const result = names.findIndex(name => name.length > 7); -console.log(result) // 0 -const age = ages.findIndex((age) => age < 20); -console.log(age) // 5 + +```sh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: "Finland", country: 250, city: "Helsinki", …} +I am a child of the person class +Asabeneh Yetayeh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: "Finland", country: 250, city: "Helsinki", …} +Asabeneh Yetayeh is Finland. He lives Helsinki, 250. ``` -*sort*: The sort methods arranges the array elements either ascending or decending order. By default, the ***sort()*** method sorts values as strings.This works well for string array items but not for numbers. If number values are sorted as strings and it give us wrong result. Sort method modify the original array. It is recommended to copy the original document before you start sorting. -#### Sorting string values + +### Overriding methods + +As you can see, we manage to access all the methods in the Person Class and we used it in the Student child class. We can customize the parent methods, we can add additional properties to a child class. If we want to customize, the methods and if we want to add extra properties, we need to use the constructor function the child class too. In side the constructor function we call the super() function to access all the properties from the parent class. The Person class didn't have gender but now let us give gender property for the child class, Student. If the same method name used in the child class, the parent method will be overridden. + ```js -const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot']; -console.log(products.sort()) // ["Apple", "Carrot", "Coffee", "Honey", "Milk", "Sugar"] +class Student extends Person { + constructor(firstName, lastName, age, country, city, gender) { + super(firstName, lastName, age, country, city) + this.gender = gender + } + + saySomething() { + console.log('I am a child of the person class') + } + getPersonInfo() { + let fullName = this.getFullName() + let skills = + this.skills.length > 0 && + this.skills.slice(0, this.skills.length - 1).join(', ') + + ` and ${this.skills[this.skills.length - 1]}` + + let formattedSkills = skills ? `He knows ${skills}` : '' + let pronoun = this.gender == 'Male' ? 'He' : 'She' + + let info = `${fullName} is ${this.age}. ${pronoun} lives in ${this.city}, ${this.country}. ${formattedSkills}` + return info + } +} -//Now the original products array is also sorted +const s1 = new Student( + 'Asabeneh', + 'Yetayeh', + 250, + 'Finland', + 'Helsinki', + 'Male' +) +const s2 = new Student('Lidiya', 'Tekle', 28, 'Finland', 'Helsinki', 'Female') +s1.setScore = 1 +s1.setSkill = 'HTML' +s1.setSkill = 'CSS' +s1.setSkill = 'JavaScript' + +s2.setScore = 1 +s2.setSkill = 'Planning' +s2.setSkill = 'Managing' +s2.setSkill = 'Organizing' + +console.log(s1) + +console.log(s1.saySomething()) +console.log(s1.getFullName()) +console.log(s1.getPersonInfo()) + +console.log(s2.saySomething()) +console.log(s2.getFullName()) +console.log(s2.getPersonInfo()) ``` -#### Sorting Numeric values -As you can see in the example below, 100 came first after sorted in ascending order. Sort converts items to string , since '100' and other numbers compared, 1 which the beginning of the string '100' became the smallest. To avoid this, we use a compare call back function inside the sort method, which return a negative, zero or positive. -```js -const numbers = [9.81, 3.14, 100, 37] -// Using sort method to sort number items provde a wrong result. see below -console.log(numbers.sort()) //[100, 3.14, 37, 9.81] -numbers.sort(function(a, b) { -return a - b; -}) +```sh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki", …} +Student {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Helsinki", …} +I am a child of the person class +Asabeneh Yetayeh +Student {firstName: "Asabeneh", lastName: "Yetayeh", age: 250, country: "Finland", city: "Helsinki", …} +Asabeneh Yetayeh is 250. He lives in Helsinki, Finland. He knows HTML, CSS and JavaScript +I am a child of the person class +Lidiya Tekle +Student {firstName: "Lidiya", lastName: "Tekle", age: 28, country: "Finland", city: "Helsinki", …} +Lidiya Tekle is 28. She lives in Helsinki, Finland. He knows Planning, Managing and Organizing +``` +Now, the getPersonInfo method has been overridden and it identifies if the person is male or female. -console.log(numbers) // [3.14, 9.81, 37, 100] -numbers.sort(function(a, b) { -return b - a; -}); -console.log(numbers) //[100, 37, 9.81, 3.14] +## Exercises -``` -#### Sorting Object Arrays -When ever we sort objects in an array. We use the object key to compare. Lets see the example below. +### Exercises Level 1 -```js -objArr.sort(function(a, b) { - if (a.key < b.key) return -1; - if (a.key > b.key) return 1; - return 0; -}); -// or -objArr.sort(function(a, b) { - if (a['key'] < b['key']) return -1; - if (a['key'] > b['key']) return 1; - return 0; -}); -const users = [{name:"Asabeneh", age:150}, {name:"Brook", age:50}, {name:"Eyo", age:100},{name:"Elias", age:22}]; -users.sort((a, b) => { - if (a.age < b.age) return -1; - if (a.age > b.age) return 1; - return 0; -}); -console.log(users); // sorted ascending -//[{…}, {…}, {…}, {…}] +1. Create an Animal class. The class will have name, age, color, legs properties and create different methods +2. Create a Dog and Cat child class from the Animal Class. +### Exercises Level 2 -``` +1. Override the method you create in Animal class -### Exercises: -```js - const countries = ['Estonia', 'Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']; - const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']; - const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] -``` -1. Explain the difference between ***forEach, map, filter, and reduce***. -2. Define a call function before you them in forEach, map, filter or reduce. -3. Use ***forEach*** to console.log each country in the countries array. -4. Use ***forEach*** to console.log each name in the names array. -5. Use ***forEach*** to console.log each number in the numbers array. -6. Use ***map*** to create a new array by changing each country to uppercase in the countries array; -7. Use ***map*** to create a new array by changing each number to square in the numbers array -8. Use ***map*** to change to each name to uppercase in the names array -9. Use ***filter*** to filter out countries containing ***land***. -10. Use ***filter*** to filter out countries having six character. -11. Use ***filter*** to filter out countries containing six letters and more in the counntry array. -12. Use ***filter*** to filter out country start with 'E'; -13. Chain two or more array iterators(eg. arr.map(callback).filter(callback).reduce(callback)) -14. Declare a function called getStringLists which takes an array as a parameter and then returns an array only with string items. -15. Use ***reduce*** to sum all the numbers in the numbers array. -16. Use ***reduce*** to concatinate all the countries and to produce this sentence: ***Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries*** -17. Explain the difference between ***some*** and ***every*** -18. Use ***some*** to check if some names' length greater than seven in names array -19. Use ***every*** to check if all the countries contain the word land -20. Explain the difference between ***find*** and ***findIndex***. -21. Use ***find*** to find the first country containing only six letters in the countries array -22. Use ***findIndex*** to find the position of the first country containing only six letters in the countries array -23. Use ***findIndex*** to find the position of ***Norway*** if it doesn't exist in the array you will get -1. -24. Use ***findIndex*** to find the position of ***Russia*** if it doesn't exist in the array you will get -1. -25. Declare a function called ***categorizeCountries*** which returns an array of countries which have some common pattern(you find the countries array in this repository as countries.js(eg 'land', 'ia', 'island','stan')). -26. Create a function which return an array of objects, which is the letter and the number of times the letter use to start with a name of a country. -27. Declare a ***getFirstTenCountries*** function and return an array of ten countries. Use different functional programming to work on the countries.js array -28. Declare a ***getLastTenCountries*** function which which returns the last ten countries in the countries array. -29. Find out which *letter* is used many *times* as intial for a country name from the conuntries array (eg. Finland, Fiji, France etc) -30. Use the countries information, in the data folder. Sort countries by name, by capital, by population -31. Sort out the ten most spoken langauges by location. -32. Sort out the ten most populated countries. - -## Destructuring and Spread -Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable. -#### Destructing Arrays -```js - const numbers = [1, 2,3]; - let [numOne, numTwo, numThree] = numbers; - console.log(numOne, numTwo, numThree) // 1,2,3 - const names = ['Asabeneh', 'Brook', 'David', 'John'] - let [firstPerson, secondPerson, ThirdPerson, fourth Person] = names; - console.log(firstName, secondPerson,thirdPerson, fourthPerson) //Asabeneh, Brook, David, John - const scientificConstants = [2.72, 3.14, 9.81, 37, 100]; - let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants - console.log(e,pi,gravity, bodyTemp, boilingTemp) //2.72, 3.14, 9.81, 37, 100 +### Exercises Level 3 + +1. Let's try to develop a program which calculate measure of central tendency of a sample(mean, median, mode) and measure of variability(range, variance, standard deviation). In addition to those measures find the min, max, count, percentile, and frequency distribution of the sample. You can create a class called Statistics and create all the functions which do statistical calculations as method for the Statistics class. Check the output below. + +```JS +ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26] +console.log('Count:', statistics.count()) // 25 +console.log('Sum: ', statistics.sum()) // 744 +console.log('Min: ', statistics.min()) // 24 +console.log('Max: ', statistics.max()) // 38 +console.log('Range: ', statistics.range() // 14 +console.log('Mean: ', statistics.mean()) // 30 +console.log('Median: ',statistics.median()) // 29 +console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5} +console.log('Variance: ',statistics.var()) // 17.5 +console.log('Standard Deviation: ', statistics.std()) // 4.2 +console.log('Variance: ',statistics.var()) // 17.5 +console.log('Frequency Distribution: ',statistics.freqDist()) // [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] ``` -If we like to skip on of the values in the array we use additional comma. The comma helps to omit the value at that index -```js - const numbers = [1, 2,3]; - let [numOne, , , numThree] = numbers; //2 is omitted - console.log(numOne,, numThree) // 1,2,3 - const names = ['Asabeneh', 'Brook', 'David', 'John'] - let [, secondPerson, , fourth Person] = name; // first and third person is omitted - console.log(secondPerson, fourthPerson) //Brook, John +```sh +// you output should look like this +console.log(statistics.describe()) +Count: 25 +Sum: 744 +Min: 24 +Max: 38 +Range: 14 +Mean: 30 +Median: 29 +Mode: (26, 5) +Variance: 17.5 +Standard Deviation: 4.2 +Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)] ``` -We can use default value in case the value of array for that index is undefined: + +1. Create a class called PersonAccount. It has firstname, lastname, incomes, expenses properties and it has totalIncome, totalExpense, accountInfo,addIncome, addExpense and accountBalance methods. Incomes is a set of incomes and its description and expenses is also a set of expenses and its description. + +## Regular Expressions + +A regular expression or RegEx is a small programming language that helps to find pattern in data. A RegEx can be used to check if some pattern exists in a different data types. To use RegEx in JavaScript either we use RegEx constructor or we can declare a RegEx pattern using two forward slashes followed by a flag. We can create a pattern in two ways. + +To declare a string we use a single quote, double quote a backtick to declare a regular expression we use two forward slashes and an optional flag. The flag could be g, i, m, s, u or y. + +### RegEx parameters + +A regular expression takes two parameters. One required search pattern and an optional flag. + +#### Pattern + +A pattern could be a text or any form of pattern which some sort of similarity. For instance the word spam in an email could be a pattern we are interested to look for in an email or a phone number format number might be our interest to look for. + +#### Flags + +Flags are optional parameters in a regular expression which determine the type of searching. Let see some of the flags: + +- g:is a global flag which means looking for a pattern in whole text +- i: case insensitive flag(it searches for both lowercase and uppercase) +- m: multiline + +### Creating a pattern with RegEx Constructor + +Declaring regular expression without global flag and case insensitive flag. + ```js -const names = [undefined, 'Brook', 'David']; -let [firstPerson = 'Asabeneh', secondPerson, thirdPerson, fourthPerson = 'John' ] = names; -console.log(firstPerson, secondPerson, thirdPerson, fourthPerson) // Asabeneh Brook David John +// without flag +let pattern = 'love' +let regEx = new RegEx(pattern) ``` -#### Destructuring Object -When we destructure the name of the variable we use to destructure should be exactly the same us the key or property of the object. See example below. -```js -const rectangle = { - width: 20, - height:10, - area: 200 -} -let {width, height, area, perimeter} = rectangle; -console.log(width, height, area, perimeter) //20 10 200 undefined +Declaring regular expression with global flag and case insensitive flag. +```js +let pattern = 'love' +let flag = 'gi' +let regEx = new RegEx(pattern, flag) ``` -#### Renaming during structuring + +Declaring a regex pattern using RegEx object. Writing the pattern and the flag inside the RegEx constructor + ```js -const rectangle = { - width: 20, - height:10, - area: 200 -} -let {width:w, heigh:h, area:a, perimeter:p} = rectangle; -console.log(w, h, a, p) //20 10 200 undefined +let regEx = new RegEx('love','gi') +``` + +### Creating a pattern without RegEx Constructor +Declaring regular expression with global flag and case insensitive flag. + +```js +let regEx= /love/gi ``` -If the key is not found in the object the variable will be assinged to undefined. In case, the key is not in the object we can give a default value during declaration. See the example. + +The above regular expression is the same as the one which we created with RegEx constructor + ```js -const rectangle = { - width: 20, - height:10, - area: 200 -} -let {width, heigh, area, perimeter = 60} = rectangle; -console.log(width, height, area, perimeter) //20 10 200 60 -//Lets modify the object:width to 30 and perimeter to 80 -const rectangle = { - width: 30, - height:10, - area: 200, - perimeter:80 -} -let {width, heigh, area, perimeter = 60} = rectangle; -console.log(width, height, area, perimeter) //20 10 200 80 +let regEx= new RegEx('love','gi') ``` -Destructuring keys as a function paramters. Lets create a function which take a rectangle object and it return a perimeter of a rectangle. +### RegExp Object Methods + +Let see some of RegEx methods + +#### Testing for a match + +*test()*:Tests for a match in a string. It returns true or false. + ```js - // Without destructuring - const rect = { - width:20, - height:10 - } - const calculatePerimeter = (rectangle) => { - return 2 * (rectangle.width + rectangle.height) - } - console.log(calculatePerimeter(rect)) // 60 - //with destructuring +const str = 'I love JavaScript' +const pattern = /love/ +const result = pattern.test(str) +console.log(result) +``` - const calculatePerimeter = ({width, height}) => { - return 2 * (width + height) - } +```sh +true +``` - console.log(calculatePerimeter(rect)) // 60 +#### Array containing all of the match - //Another Example -const person = { - firstName: "Asabeneh", - lastName: "Yetayeh", - age: 200, - country: "Finland", - job: "Instructor and Developer", - skills: [ - "HTML", - "CSS", - "JavaScript", - "React", - "Redux", - "Node", - "MongoDB", - "Python", - "D3.js" - ], - languages: ["Amharic", "English", "Suomi(Finnish)"] -}; -// Lets create a function which give information about the person object without destructuring +*match()*:Returns an array containing all of the matches, including capturing groups, or null if no match is found. +If we do not use a global flag, match() returns an array containing the pattern, index, input and group. -const getPersonInfo = obj => { - const skills = obj.skills; - const formattedSkills = skills.slice(0, -1).join(", "); - const languages = obj.languages; - const formattedLanguages = languages.slice(0, -1).join(", "); +```js +const str = 'I love JavaScript' +const pattern = /love/ +const result = str.match(pattern) +console.log(result) +``` - return `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is ${ - obj.age - } years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${ - skills[skills.length - 1] - }. He speakes ${formattedLanguages} and a little bit of ${languages[2]}.`; -}; -console.log(getPersonInfo(person)); -// Lets create a function which give information about the person object with destructuring +```sh +["love", index: 2, input: "I love JavaScript", groups: undefined] +``` -const getPersonInfo = ({ - firstName, - lastName, - age, - country, - job, - skills, - languages -}) => { - const formattedSkills = skills.slice(0, -1).join(", "); - const formattedLanguages = languages.slice(0, -1).join(", "); +```js +const str = 'I love JavaScript' +const pattern = /love/g +const result = str.match(pattern) +console.log(result) +``` + +```sh +["love"] +``` + +*search()*: Tests for a match in a string. It returns the index of the match, or -1 if the search fails. + +```js +const str = 'I love JavaScript' +const pattern = /love/g +const result = str.search(pattern) +console.log(result) +``` - return `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${skills[skills.length - 1]}. He speakes ${formattedLanguages} and a little bit of ${languages[2]}.`; -}; -console.log(getPersonInfo(person)) -/* -Asabeneh Yetayeh lives in Finland. He is 200 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speakes Amharic, English and a little bit of Suomi(Finnish) -*/ +```sh +2 ``` -### Spread or Rest Operator - #### Exercise: Destructuring - ```js - const constants = [2.72, 3.14, 9.81,37, 100] - const countries = ['Finland', 'Estonia', 'Sweden', 'Denmark', 'Norway'] +#### Replacing a substring - const rectangle = { - width:20, - height:10, - area:200, - perimeter:60 - } +*replace()*: Executes a search for a match in a string, and replaces the matched substring with a replacement substring. - ``` - 1. Assign the elements of constants array to e, pi, gravity, humanBodyTemp, waterBoilingTemp. - 2. Assign the elements of countries array to fin, est, sw, den, nor - 3. Destructure the rectangle object by its propertis or keys. +```js +const txt = 'Python is the most beautiful language that a human begin has ever created.\ +I recommend python for a first programming language' -## Document Object Model -HTML document is structured as a JavaScript Object. Every HTML element has a different properties which can help to manipulate it. It is possible to get, create, append or remove HTML elements using JavaScript. Check the examples below. Selecting HTML element using JavaScript is similar to select CSS. To select an HTML element, we use tag name, id, class name. To create an HTML element we use tag name. +matchReplaced = txt.replace(/Python|python/, 'JavaScript') +console.log(matchReplaced) +``` -### Getting Element -```html -First Paragraph
-Second Paragradph
-Third Paragraph
- - - +### Zero or one times(?) + +Zero or one times. The pattern could may not occur or it may occur once. + +```js +const txt = 'I am not sure if there is a convention how to write the word e-mail.\ +Some people write it email others may write it as Email or E-mail.' +const pattern = /[Ee]-?mail/g // ? means optional +matches = txt.match(pattern) + +console.log(matches) // ["e-mail", "email", "Email", "E-mail"] + ``` - 1. Create an index.html file and put four p elementts as above: Get the first paragraph by using ***document.querySelector(tagname)*** and tag name - 2. Get get each of the the paragraph using ***document.querySelector('#id')*** and by their id - 3. Get all the p as nodeList using ***document.querySelectorAll(tagname)*** and by their tag name - 4. Loop through the nodeList and get the text content of each paragraph - 5. Set a text content to paragraph the fourth paragraph,***Fourth Paragraph*** - 6. Set id and class attribute for all the paragraphs using different attribute setting methods - 7. Change stye of each paragraph using JavaScript(eg. color, background, border, font-size, font-famil) - 8. Select all paragraphs and loop through each elements and give the first and third paragraph a color of color, and the second and the fourth paragraph a red color - 9. Remove all the paragrapsh and create them using JavaScript - 10. Set text content, id and class to each paragraph - 11. Create a div container on HTML document and create 100 numbers dynamically and append to the container div. Put each number in 150px by 150px box. If the number is even the background will be lightgreen else lightblue. - 12. Use the rgb color generator function or hexaColor generator to create 10 divs with random background colors - 13. Use the countries.js to visualize all the countries on the HTML document. You need one wrapper div and box for each countries. In the box display, the letter the country starts with, the name of the country and the number of characters for the country name. - -#### DOM: Mini Projects -1. BMI calculator -2. Hexadecimal or RGB color Generator -3. World Countries List - -## Class + +### Quantifier in RegEx + +We can specify the length of the substring we look for in a text, using a curly bracket. Lets imagine, we are interested in substring that their length are 4 characters ```js -class Person { - constructor(firstName, lastName, age, location, skills) { - this.firstName = firstName; - this.lastName = lastName; - this.age = age; - this.location = location; - this.skills = skills; - } - getFull() { - return `${this.firstName} ${this.lastName}`; - } -} +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\d{4}/g // exactly four times +const matches = txt.match(pattern) +console.log(matches) // ['2019'] ``` -#### Exercises:Classes +```js +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /\d{1,4}/g // 1 to 4 +const matches = txt.match(pattern) +console.log(matches) // ['6', '2019'] +``` -## Regular Expressions -Regular expression is a small program language which is used with many programming langagues. Regular expression match or search for a pattern. We use ' or '' to create a string data type. We can create a pattern in two ways. +### Cart ^ -### Creating a pattern +- Starts with + ```js -let pattern = /love/; -let pattern = new RegEx('love'); +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /^This/ // ^ means starts with +const matches = txt.match(pattern) +console.log(matches) // ['This'] ``` -### Creatign a pattern with flags: global flag (g), case insensitive flag(i) + +- Negation + ```js -let pattern = /love/gi; // declaring a regex pattern -let pattern = new RegEx('love','gi'); // declaring a regex pattern using RegEx object +const txt = 'This regular expression example was made in December 6, 2019.' +const pattern = /[^A-Za-z,. ]+/g // ^ in set character means negation, not A to Z, not a to z, no space, no coma no period +const matches = txt.match(pattern) +console.log(matches) // ["6", "2019"] ``` + +### Exact match + +It should have ^ starting and $ which is an end. + ```js -let pattern = /[A-Z][a-z]{3,12}/; -let name = "Asabeneh"; -pattern.test(name); -//output:true +let pattern = /^[A-Z][a-z]{3,12}$/; +let name = 'Asabeneh'; +let result = pattern.test(name) + +console.log(result) // true ``` -### RegExp Object Methods + +## 💻 Exercises + +### Exercises: Level 1 + +1. Calculate the total annual income of the person from the following text. ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’ +1. The position of some particles on the horizontal x-axis -12, -4, -3 and -1 in the negative direction, 0 at origin, 4 and 8 in the positive direction. Extract these numbers and find the distance between the two furthest particles. + ```js -const str = 'I love JavaScript'; -const pattern = /love/; -const result = pattern.test(str); -console.log(result); +points = ['-1', '2', '-4', '-3', '-1', '0', '4', '8'] +sortedPoints = [-4, -3, -1, -1, 0, 2, 4, 8] +distance = 12 ``` -#### Exercises:Regular Expressions -- Calculate the total annual income of the person from the following text. ‘He earns 4000 euro from salary per month, 10000 euro annual bonus, 5500 euro online courses per month.’ +1. Write a pattern which identify if a string is a valid JavaScript variable + + ```sh + is_valid_variable('first_name') # True + is_valid_variable('first-name') # False + is_valid_variable('1first_name') # False + is_valid_variable('firstname') # True + ``` + +### Exercises: Level 2 + +1. Write a function called *tenMostFrequentWords* which get the ten most frequent word from a string? + + ```js + paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.` + console.log(tenMostFrequentWords(paragraph)) + ``` + + ```sh + [ + {word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1}, + {word:'to', count:1}, + {word:'the', count:1}, + {word:'something', count:1}, + {word:'if', count:1}, + {word:'give', count:1}, + {word:'develop',count:1}, + {word:'capabilities',count:1}, + {word:'application', count:1}, + {word:'an',count:1}, + {word:'all',count:1}, + {word:'Python',count:1}, + {word:'If',count:1}] + ``` + + ```js + console.log(tenMostFrequentWords(paragraph, 10)) + ``` + + ```sh + [{word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1} + ] + ``` + +### Exercises: Level 3 + +1. Writ a function which cleans text. Clean the following text. After cleaning, count three most frequent words in the string. + + ```js + sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?` + + console.log(cleanText(sentence)) + ``` + + ```sh + I am a teacher and I love teaching There is nothing as more rewarding as educating and empowering people I found teaching more interesting than any other jobs Does this motivate you to be a teacher + ``` +1. Write a function which find the most frequent words. After cleaning, count three most frequent words in the string. + + ```js + console.log(mostFrequentWords(cleanedText)) + [{word:'I', count:3}, {word:'teaching', count:2}, {word:'teacher', count:2}] + ``` + + +## Promises and Callbacks + +From the following code blocks you will notice, the difference between callback and promises: + + ```js + //Callback + const doSomething = callback => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + callback('It didnt go well', skills) + }, 2000) + } + + doSomething((err, result) => { + if (err) { + return console.log(err) + } + return console.log(result) + }) + // after 2 seconds it will print + // => It didnt go well + + const doSomething = callback => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + callback(false, skills) + }, 2000) + } + + doSomething((err, result) => { + if (err) { + return console.log(err) + } + return console.log(result) + }) + // after 2 seconds it will print the skills + // => ["HTML", "CSS", "JS"] + + ``` + + ```js + // Promise + const doPromise = new Promise((resolve, reject) => { + setTimeout(() => { + const skills = ['HTML', 'CSS', 'JS'] + if (skills.length > 0) { + resolve(skills) + } else { + reject('Something wrong has happened') + } + }, 2000) +}) + +doPromise + .then(result => { + console.log(result) + }) + .catch(error => console.log(error)) + +const myPromise = n => { + return new Promise((resolve, reject) => { + if (n) { + resolve(n * n) + } else { + reject('You need to pass an argument') + } + }) +} + +const square = async n => { + let value = await myPromise(n) + return value +} + +square() + .then(res => { + console.log(res) + }) + .catch(err => console.log(err)) +console.log(square(10)) + ``` + +## Async and Await + +```js + const url = 'https://restcountries.eu/rest/v2/alll' + fetch(url) + .then(response => response.json()) + .then(data => { + console.log(data) + }) + .catch(error => console.log(error)) + + const fetchData = async () => { + try { + const response = await fetch(url) + const countries = await response.json() + console.log(countries) + } catch (err) { + console.log(err) + } + } + console.log('===== async and await') + fetchData() + ``` ## localStorage -Local storage is the para of the web storage API which is used to store data on the browser with no expiration data. The data will be availabe on the browser even after the browser is closed. There are five methods to work on local stroage: +Local storage is the para of the web storage API which is used to store data on the browser with no expiration data. The data will be available on the browser even after the browser is closed. There are five methods to work on local storage: _setItem(), getItem(), removeItem(), clear(), key()_ -##### Setting item to the localStorage +### Setting item to the localStorage + When we set data to be stored in a localStorage, it will be stored as a string. If we are storing an array or an object, we should stringify it first to keep the format unless otherwise we lose the array structure or the object structure of the original data + ```js localStorage.setItem('name', 'Asabeneh'); -console.log(localStorage) //Storage {name: "Asabeneh", length: 1} +console.log(localStorage) //Storage {name: 'Asabeneh', length: 1} localStorage.setItem('age', 200); -console.log(localStorage) //Storage {age: "200", name: "Asabeneh", length: 2} +console.log(localStorage) //Storage {age: '200', name: 'Asabeneh', length: 2} const skills = ['HTML', 'CSS', 'JS', 'React']; -//Skills array has to be stringfied first to keep the format. +//Skills array has to be stringified first to keep the format. const skillsJSON = JSON.stringify(skills,undefined, 4) localStorage.setItem('skills', skillsJSON); -console.log(localStorage) //Storage {age: "200", name: "Asabeneh", skills: "HTML,CSS,JS,React", length: 3} +console.log(localStorage) //Storage {age: '200', name: 'Asabeneh', skills: 'HTML,CSS,JS,React', length: 3} ``` + If we are storing an array, an object or object array, we should stringify the object first. See the example below. -```js +```js let skills = [ - { tech: "HTML", level: 10 }, - { tech: "CSS", level: 9 }, - { tech: "JS", level: 8 }, - { tech: "React", level: 9 }, - { tech: "Redux", level: 10 }, - { tech: "Node", level: 8 }, - { tech: "MongoDB", level: 8 } + { tech: 'HTML', level: 10 }, + { tech: 'CSS', level: 9 }, + { tech: 'JS', level: 8 }, + { tech: 'React', level: 9 }, + { tech: 'Redux', level: 10 }, + { tech: 'Node', level: 8 }, + { tech: 'MongoDB', level: 8 } ]; let skillJSON = JSON.stringify(skills); -localStorage.setItem("skills", skillJSON); +localStorage.setItem('skills', skillJSON); ``` -##### Getting item from localStorage + +### Getting item from localStorage + ```js let name = localStorage.getItem('name'); let age = localStorage.getItem('age'); let skills = localStorage.getItem('skills'); -console.log(name, age, skills) // 'Asabeneh', '200', '["HTML","CSS","JS","React"]' +console.log(name, age, skills) // 'Asabeneh', '200', '['HTML','CSS','JS','React']' -let skillsObj = JSON.parse(localStorage.getItem("skills"), undefined, 4); +let skillsObj = JSON.parse(localStorage.getItem('skills'), undefined, 4); console.log(skillsObj); - ``` -##### Clearing the localStorage -The clear method, will clear eveything stored in the local storage + +### Clearing the localStorage + +The clear method, will clear everything stored in the local storage + ```js localStorage.clear(); ``` -## Exercises:Local Storage +### Exercises:Local Storage ## Cookies -#### Exercises:Cookies - -### [JavaScipt Tests](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-1) -- [JavaScript Test 1](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-1) -- [JavaScript Test 2](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-2) -- [JavaScript Test 3](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-3) - -___ - - - - - - -* [JavaScript for Everyone](#javascript-for-everyone) - * [Table of Contents](#table-of-contents) - * [Introduction](#introduction) - * [Setup](#setup) - * [Adding JavaScript to a web page](#adding-javascript-to-a-web-page) - * [Inline Script](#inline-script) - * [Internal script](#internal-script) - * [External script](#external-script) - * [Exercises:Setting Up your machine](#exercisessetting-up-your-machine) - * [Variables](#variables) - * [Exercise - 1 : Variables](#exercise-1-variables) - * [Comments](#comments) - * [Exercise - 2 : Comments](#exercise-2-comments) - * [Data Types](#data-types) - * [Exercises - 3 : Data Types](#exercises-3-data-types) - * [Strings](#strings) - * [String Concatination](#string-concatination) - * [Exercise - 4 : String](#exercise-4-string) - * [Numbers](#numbers) - * [Math Object](#math-object) - * [Booleans](#booleans) - * [Exercise - 5 : Booleans](#exercise-5-booleans) - * [Undefined](#undefined) - * [Null](#null) - * [Exercise - 6 : Data types](#exercise-6-data-types) - * [Operators](#operators) - * [Arthimetic Operators](#arthimetic-operators) - * [Exercises : Arthimetic Operators:](#exercises-arthimetic-operators) - * [Logical Operators](#logical-operators) - * [Exercises: Logical Operators](#exercises-logical-operators) - * [Comparison Operators](#comparison-operators) - * [Exercise - 7 : Comparison Operators](#exercise-7-comparison-operators) - * [Conditionals](#conditionals) - * [If](#if) - * [If Else](#if-else) - * [If else if else](#if-else-if-else) - * [Switch](#switch) - * [Ternary Operators](#ternary-operators) - * [Exercise - 8 : Conditionals](#exercise-8-conditionals) - * [Loops](#loops) - * [For Loop](#for-loop) - * [While loop](#while-loop) - * [Do while loop](#do-while-loop) - * [Exercises:Loops](#exercisesloops) - * [Arrays](#arrays) - * [Exercise - 9 : Arrays](#exercise-9-arrays) - * [More on Arrays](#more-on-arrays) - * [Exercise -10 : Array Methods](#exercise-10-array-methods) - * [Functions](#functions) - * [Function Declaration](#function-declaration) - * [Function Expression](#function-expression) - * [Anonymous Function](#anonymous-function) - * [Arrow Function](#arrow-function) - * [Arrow Function vs Declaration Function](#arrow-function-vs-declaration-function) - * [Exercise - 10 : Functions](#exercise-10-functions) - * [Object](#object) - * [Object Methods:](#object-methods) - * [Date Object](#date-object) - * [Exercises:](#exercises) - * [Exercises:Objects](#exercisesobjects) - * [Functional Programming](#functional-programming) - * [Sorting string values](#sorting-string-values) - * [Sorting Numeric values](#sorting-numeric-values) - * [Sorting Object Arrays](#sorting-object-arrays) - * [Exercises:](#exercises-1) - * [Destructuring and Spread](#destructuring-and-spread) - * [Destructing Arrays](#destructing-arrays) - * [Destructuring Object](#destructuring-object) - * [Renaming during structuring](#renaming-during-structuring) - * [Spread or Rest Operator](#spread-or-rest-operator) - * [Document Object Model](#document-object-model) - * [Getting Element](#getting-element) - * [Getting elements by tag name](#getting-elements-by-tag-name) - * [Getting elements by class name](#getting-elements-by-class-name) - * [Getting an element by id](#getting-an-element-by-id) - * [Getting elements by using querySelector using tag, class and id:](#getting-elements-by-using-queryselector-using-tag-class-and-id) - * [Adding attribute](#adding-attribute) - * [Adding attribute using setAttribute](#adding-attribute-using-setattribute) - * [Adding attribute without setAttribute](#adding-attribute-without-setattribute) - * [Adding class using classList](#adding-class-using-classlist) - * [Adding Text conent](#adding-text-conent) - * [Adding style](#adding-style) - * [Creating an Element](#creating-an-element) - * [Creating elements](#creating-elements) - * [Appending to a parent element](#appending-to-a-parent-element) - * [Event Listeners](#event-listeners) - * [Getting value from an input element](#getting-value-from-an-input-element) - * [Exercises:Document Object Model](#exercisesdocument-object-model) - * [DOM: Mini Projects](#dom-mini-projects) - * [Class](#class) - * [Exercises:Classes](#exercisesclasses) - * [Regular Expressions](#regular-expressions) - * [Creating a pattern](#creating-a-pattern) - * [Creatign a pattern with flags: global flag (g), case insensitive flag(i)](#creatign-a-pattern-with-flags-global-flag-g-case-insensitive-flagi) - * [RegExp Object Methods](#regexp-object-methods) - * [Exercises:Regular Expressions](#exercisesregular-expressions) - * [localStorage](#localstorage) - * [Set Item](#set-item) - * [Getting item from local storage](#getting-item-from-local-storage) - * [Exercises:Local Storage](#exerciseslocal-storage) - * [Cookies](#cookies) - * [Exercises:Cookies](#exercisescookies) - * [JavaScipt Tests](#javascipt-testshttpsgithubcomasabenehjavascript-for-everyonewikijavascript-test-1) - - +### Exercises:Cookies + +## JavaScript Interview Questions + +### [JavaScript Tests](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Tests) + +### [JavaScript Test 1](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-1) + +### [JavaScript Test 2](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-2) + +### [JavaScript Test 3](https://github.com/Asabeneh/JavaScript-for-Everyone/wiki/JavaScript-Test-3) + +- [JavaScript Test 3: Solutions](https://github.com/Asabeneh/JavaScript-for-Everyone/blob/master/solutions/javascript-test-3.js) +JavaScript-Test-4) +- [JavaScript Test 4: Solutions](https://github.com/Asabeneh/JavaScript-for-Everyone/blob/master/solutions/javascript-test-4.js) diff --git a/scripts/00-introduction.js b/scripts/00-introduction.js new file mode 100644 index 0000000..c96d4ed --- /dev/null +++ b/scripts/00-introduction.js @@ -0,0 +1,3 @@ +console.log('Welcome to JavaScript'); +console.log('Congratulations! You wrote your first JavaScript code.'); +console.log('Welcome to JavaScript for Everyone'); diff --git a/scripts/01-variables.js b/scripts/01-variables.js new file mode 100644 index 0000000..555de24 --- /dev/null +++ b/scripts/01-variables.js @@ -0,0 +1,18 @@ +// Declaring different variables of different data types +let firstName = 'Asabeneh'; +let lastName = 'Yetayeh'; +let location = 'Helsinki'; +let country = 'Finland'; +let city = 'Helsinki'; +let age = 100; +let isMarried = true; +const gravity = 9.81; +const boilingPoint = 100; +const PI = 3.14; // can can be accessed like this too: Math.PI +console.log(firstName, lastName, location, country, age, gravity, PI); + +// Variables can also be declaring in one line separated by comma +let name = 'Asabeneh', + job = 'Teacher', + live = 'Finland'; +console.log(name, job, live); diff --git a/02-comment.js b/scripts/02-comment.js similarity index 100% rename from 02-comment.js rename to scripts/02-comment.js diff --git a/03-concationation.js b/scripts/03-concatination.js similarity index 61% rename from 03-concationation.js rename to scripts/03-concatination.js index 4cce76c..4f6663a 100644 --- a/03-concationation.js +++ b/scripts/03-concatination.js @@ -1,11 +1,10 @@ // Declaring different variables of different data types -let firstName = "Asabeneh"; -let lastName = "Yetayeh"; -let fullName = firstName + " " + lastName; // concatination, merging to string together. +let firstName = 'Asabeneh'; +let lastName = 'Yetayeh'; +let fullName = firstName + ' ' + lastName; // concatination, merging to string together. console.log(fullName); - -let personInfoOne = fullName + ".I am " + age + ". I live in " + country; // ES5 +let personInfoOne = fullName + '.I am ' + age + '. I live in ' + country; // ES5 let personInfoTwo = `I am ${fullName}.I am ${age}. I live in ${country}`; //ES6 - String interpolation method console.log(personInfoOne); console.log(personInfoTwo); diff --git a/scripts/04-string_interpolation.js b/scripts/04-string_interpolation.js new file mode 100644 index 0000000..a26676e --- /dev/null +++ b/scripts/04-string_interpolation.js @@ -0,0 +1,28 @@ +let firstName = 'Asabeneh'; +let letlastName = 'Yetayeh'; +let age = 200; // number data type +let country = 'Finland'; +let job = 'teacher'; +let lang = 'JavaScript'; +let personInfo = `I am ${fullName}.I am a ${age} years old. I am a ${job} and I love teaching. +I live in ${country}.`; //ES6 - String interpolation method +console.log(personInfo); + +let numberOne = 10; +let numberTwo = 90; +console.log( + `The sum of ${numberOne} and ${numberTwo} is ${numberOne + numberTwo}.` +); +//More Examples +let gravity = 9.81; +let boilingPoint = 100; +let bodyTemp = 37; + +/* + The boiling point of water is 100 oC. + Human body temperatue is 37 oC. + The gravity of earth is 9.81 m/s2. + */ +console.log( + `The boiling point of water is ${boilingPoint} oC.\nHuman body temperatue is ${body} oC.\nThe gravity of earth is ${gravity} m / s2.` +); diff --git a/05-numbers.js b/scripts/05-numbers.js similarity index 100% rename from 05-numbers.js rename to scripts/05-numbers.js diff --git a/05-string-method.js b/scripts/05-string-method.js similarity index 53% rename from 05-string-method.js rename to scripts/05-string-method.js index 0214a69..e0a8f1f 100644 --- a/05-string-method.js +++ b/scripts/05-string-method.js @@ -1,14 +1,14 @@ /* === String Built in Methods === */ -let firstName = "Asabeneh"; -let lastName = "Yetayeh"; -let location = "Helsinki"; +let firstName = 'Asabeneh'; +let lastName = 'Yetayeh'; +let location = 'Helsinki'; console.log(firstName.length); // to check the length of a string console.log(firstName.toUpperCase()); // to capitalize console.log(firstName.toLowerCase()); // to change to lower case letters -let company = 'google' +let company = 'google'; var firstLetter = company.slice(0, 1); // to slice out the first letter of the word var remainingLetters = company.slice(1, company.length); @@ -16,16 +16,16 @@ console.log(firstLetter); console.log(remainingLetters); var modifiedName = firstLetter.toUpperCase() + remainingLetters; console.log(modifiedName); -var school = "International Academy Award"; +var school = 'International Academy Award'; console.log(school.split()); // creates an array of one item -console.log(school.split("")); // it creates an array of letters and spaces; -console.log(school.split(" ")); // creates an array of words -console.log(school.indexOf("A")); // gives the index of the A in the string which is case sensitive -console.log(school.lastIndexOf("A")); //the last A, which is A from the word Award -console.log(school.includes("rify")); // it checks if the string exist and returns boolean -console.log(school.includes("Award")); // it checks if the string exist and returns boolean -console.log(school.includes("demy")); // it checks if the string exist and returns boolean -console.log(school.startsWith("Inter")); // checks if the string starts with the provided value and returns boolean +console.log(school.split('')); // it creates an array of letters and spaces; +console.log(school.split(' ')); // creates an array of words +console.log(school.indexOf('A')); // gives the index of the A in the string which is case sensitive +console.log(school.lastIndexOf('A')); //the last A, which is A from the word Award +console.log(school.includes('rify')); // it checks if the string exist and returns boolean +console.log(school.includes('Award')); // it checks if the string exist and returns boolean +console.log(school.includes('demy')); // it checks if the string exist and returns boolean +console.log(school.startsWith('Inter')); // checks if the string starts with the provided value and returns boolean -var modifiedSchool = school.split(" "); +var modifiedSchool = school.split(' '); console.log(modifiedSchool); diff --git a/06-arthimetic_operators.js b/scripts/06-arthimetic_operators.js similarity index 77% rename from 06-arthimetic_operators.js rename to scripts/06-arthimetic_operators.js index c983e72..10bdafe 100644 --- a/06-arthimetic_operators.js +++ b/scripts/06-arthimetic_operators.js @@ -6,9 +6,11 @@ let diff = numOne - numTwo; let mult = numOne * numTwo; let div = numOne / numTwo; let remainder = numOne % numTwo; +let exponentation = numOne ** numTwo // 4 * 4 * 4 console.log(sum); console.log(diff); console.log(mult); console.log(div); console.log(remainder) +console.log(exponentation) diff --git a/07-boolean.js b/scripts/07-boolean.js similarity index 100% rename from 07-boolean.js rename to scripts/07-boolean.js diff --git a/08-template_literals.js b/scripts/08-template_literals.js similarity index 100% rename from 08-template_literals.js rename to scripts/08-template_literals.js diff --git a/09-typeof.js b/scripts/09-typeof.js similarity index 84% rename from 09-typeof.js rename to scripts/09-typeof.js index cc279e4..a41c14d 100644 --- a/09-typeof.js +++ b/scripts/09-typeof.js @@ -1,6 +1,9 @@ /* === Checking Data types === */ +let firstName = 'Asabeneh'; +let age = 250; + console.log (typeof firstName); // it gives string console.log (typeof age); // it gives number console.log (typeof firstName === 'string'); // returns true diff --git a/scripts/10-if.js b/scripts/10-if.js new file mode 100644 index 0000000..77aed67 --- /dev/null +++ b/scripts/10-if.js @@ -0,0 +1,5 @@ +//if +let isRaining = true; +if (isRaining) { + console.log('Remember to take your rain coat.'); +} diff --git a/scripts/11-ifelse.js b/scripts/11-ifelse.js new file mode 100644 index 0000000..0660537 --- /dev/null +++ b/scripts/11-ifelse.js @@ -0,0 +1,6 @@ +//if else +if (isRaining) { + console.log('It is raining. You need a rain coat.'); +} else { + console.log('It is not raining. No need for rain coat.'); +} diff --git a/scripts/12-if-else-if-else.js b/scripts/12-if-else-if-else.js new file mode 100644 index 0000000..4fedd76 --- /dev/null +++ b/scripts/12-if-else-if-else.js @@ -0,0 +1,11 @@ +// if else if else +let weather = 'sunny'; +if (weather === 'rainy') { + console.log('It is raining. You need a rain coat.'); +} else if (weather === 'cloudy') { + console.log('It might be cold you need a jacket.'); +} else if (weather === 'sunny') { + console.log('Go out freely.'); +} else { + console.log('It is not raining. No need for rain coat.'); +} diff --git a/scripts/14-switch.js b/scripts/14-switch.js new file mode 100644 index 0000000..b38c613 --- /dev/null +++ b/scripts/14-switch.js @@ -0,0 +1,111 @@ +// Switch +let weather = 'cloudy'; +switch (weather) { + case 'rainy': + console.log('It is raining. You need a rain coat.'); + break; + case 'cloudy': + console.log('It might be cold you need a jacket.'); + break; + case 'sunny': + console.log('Go out freely.'); + break; + default: + console.log('It is not raining. No need for rain coat.'); + break; +} + +// Swithc More Examples +let dayUserInput = prompt('What day is it ?'); +let day = dayUserInput.toLowerCase(); +switch (day) { + case 'monday': + console.log('Today is Monday'); + break; + case 'tuesday': + console.log('Today is Tuesday'); + break; + case 'wednesday': + console.log('Today is Wednesday'); + break; + case 'thursday': + console.log('Today is Thursday'); + break; + case 'friday': + console.log('Today is Friday'); + break; + case 'saturday': + console.log('Today is Saturday'); + break; + case 'sunday': + console.log('Today is Sunday'); + break; + default: + console.log('It is not a week day.'); + break; +} + +//Example using numbers +let i = 5; +switch (i) { + case 1: + console.log('value is 1'); + break; + case 2: + console.log('value is 2'); + break; + case 3: + console.log('value is 3'); + break; + case 4: + console.log('value is 4'); + break; + case 5: + console.log('value is 5'); + break; + default: + console.log('value not found'); +} + +// Examples to use conditions in the cases + +let num = prompt('Enter number'); +switch (true) { + case num > 0: + console.log('Number is postive'); + break; + case num == 0: + console.log('Numbers is zero'); + break; + case num < 0: + console.log('Number is negative'); + break; + default: + console.log('Entered value was not a number'); +} + +// Swithc More Examples +const month = prompt('Enter months').toLowerCase(); + +switch (month) { + case 'january': + case 'march': + case 'may': + case 'july': + case 'august': + case 'october': + case 'december': + console.log('31 days'); + break; + case 'april': + case 'march': + case 'september': + case 'november': + console.log('30 days'); + break; + case 'february': + console.log('28 days but 29 during leap year'); + break; + default: + console.log('It is not a valid month'); +} diff --git a/scripts/15-ternary-operator.js b/scripts/15-ternary-operator.js new file mode 100644 index 0000000..2c81a43 --- /dev/null +++ b/scripts/15-ternary-operator.js @@ -0,0 +1,9 @@ +let isRaining = true; +isRaining + ? console.log('You need a rain coat.') + : console.log('No need for a rain coat.'); + +let num = 5; +num > 10 + ? console.log('Number is greater than 10') + : console.log('Number is less 10'); diff --git a/scripts/16-1.0-array.js b/scripts/16-1.0-array.js new file mode 100644 index 0000000..e7d9c07 --- /dev/null +++ b/scripts/16-1.0-array.js @@ -0,0 +1,46 @@ +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +]; // String arrays +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary' +]; // string arrays +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // Number arrays +const shoppingCart = [ + 'Milk', + 'Mango', + 'Tomato', + 'Potato', + 'Avocado', + 'Meat', + 'Eggs', + 'Sugar' +]; // string arrays + +const mixedArrays = [ + 'Asabeneh', + 250, + true, + { country: 'Finland' }, + { skills: ['HTML', 'CSS', 'JavaScript'] } +]; +console.log(webTechs); +console.log(webTechs.length); // => to know the size of the array, which is 7 +console.log(webTechs[0]); //--> HTML; +console.log(webTechs[webTechs.length - 1]); //--> MongoDB +console.log(countries); +console.log(numbers); +console.log(shoppingCart); +console.log(mixedArrays); diff --git a/16-1.1-array-slice-splice.js b/scripts/16-1.1-array-slice-splice.js similarity index 100% rename from 16-1.1-array-slice-splice.js rename to scripts/16-1.1-array-slice-splice.js diff --git a/17-forloop.js b/scripts/17-forloop.js similarity index 100% rename from 17-forloop.js rename to scripts/17-forloop.js diff --git a/18-whileloop.js b/scripts/18-whileloop.js similarity index 100% rename from 18-whileloop.js rename to scripts/18-whileloop.js diff --git a/19-dowhileloop.js b/scripts/19-dowhileloop.js similarity index 100% rename from 19-dowhileloop.js rename to scripts/19-dowhileloop.js diff --git a/20-functions.js b/scripts/20-functions.js similarity index 94% rename from 20-functions.js rename to scripts/20-functions.js index 1380886..be4451f 100644 --- a/20-functions.js +++ b/scripts/20-functions.js @@ -21,8 +21,8 @@ console.log(sumTwoNumbersAndReturn(10, 20)); function printFullName(firstName, lastName) { return `${firstName} ${lastName}`; } -console.log(printFullName("Asabeneh", "Yetayeh")); -console.log(printFullName("Dean", "Phan")); +console.log(printFullName('Asabeneh', 'Yetayeh')); +console.log(printFullName('Dean', 'Phan')); function square(number) { return number * number; @@ -59,9 +59,3 @@ function sumOfEvensAndOdds() { } console.log(sumOfEvensAndOdds()); - - - - - - diff --git a/scripts/forofloop.js b/scripts/forofloop.js new file mode 100644 index 0000000..207a79d --- /dev/null +++ b/scripts/forofloop.js @@ -0,0 +1,15 @@ +const numbers = [1, 2, 3, 4, 5]; +for (const number of numbers) { + console.log(number); +} + +const names = ['Asabeneh', 'Brook', 'David', 'Mohammed', 'Marta']; + +for (const name of names) { + console.log(name); +} + +const countries = ['Finland', 'Sweden', 'Denmark', 'Norway']; +for (const country of countries) { + console.log(country); +} diff --git a/solutions/javascript-test-1.js b/solutions/javascript-test-1.js new file mode 100644 index 0000000..b7bde73 --- /dev/null +++ b/solutions/javascript-test-1.js @@ -0,0 +1,203 @@ +/**** QUESTION 1: Printing Hashes ****/ +console.log('*** QUESTION 1: Printing Hashes ***'); +const printHashes = () => { + let hash = ''; + for (let i = 0; i < 7; i++) { + hash += '#'; + console.log(hash); + } +} +printHashes(); +/**** QUESTION 2: FizzBuz ****/ +console.log('*** QUESTION 2: FizzBuz ***'); +const fizzBuz = () => { + for (let i = 1; i <= 100; i++) { + if (i % 3 === 0 && i % 5 === 0) { + console.log('FizBuzz', i); + } else if (i % 3 !== 0 && i % 5 == 0) { + console.log('Buz', i); + } else if (i % 3 == 0) { + console.log('Fizz', i); + } else { + console.log(i); + } + } +} +fizzBuz(); +/**** QUESTION 3: Maximum *** + * + * + */ +console.log('*** QUESTION 3: Maximum ***'); +const findMax = (a, b, c) => { + let max; + if (a > b && a > c) { + max = a; + } else if (b > a && b > c) { + max = b; + } else { + max = c; + } + return max; +} +console.log(findMax(10, -9, 5)); +console.log(findMax(-10, -9, -20)); +console.log(findMax(-10, -9, 20)); + +/* + *** QUESTION 4: Reverse Array *** + */ +console.log('*** QUESTION 4: Reverse Array ***'); +const reverseArray = (arr) => { + let newArr = []; + let len = arr.length - 1; + for (let i = 0; i <= len; i++) { + newArr[i] = arr[len - i]; + } + return newArr; +} +console.log(reverseArray([1, 2, 3, 4, 5])); +console.log(reverseArray(['A', 'B', 'C'])); + +/* + *** QUESTION 5: Modify Array*** + */ +console.log('*** QUESTION 5: Modify Array***'); +const modifyArray = (arr) => { + let modifiedArr = []; + if (arr.length < 5) { + return 'Not Found'; + } + for (let i = 0; i < arr.length; i++) + i === 4 + ? (modifiedArr[i] = arr[i].toUpperCase()) + : (modifiedArr[i] = arr[i]); + + return modifiedArr; +} +console.log( + modifyArray(['Avocado', 'Tomato', 'Potato', 'Mango', 'Lemon', 'Carrot']) +); + +/* + *** QUESTION 6 : Seven unique random numbers in an array*** + */ +console.log('*** QUESTION 6 : Seven unique random numbers in an array***'); +// solution 1 +function sevenRandomNumbers() { + const randNumbers = []; + while (randNumbers.length < 7) { + const randNum = Math.floor(Math.random() * 9) + 1; + if (randNumbers.indexOf(randNum) === -1) { + randNumbers.push(randNum); + } + } + return randNumbers; +} + +console.log(sevenRandomNumbers()); +// solution 2 +function sevenRandomNumbers() { + const randNumbers = []; + let i = 0; + let randNum; + let len = randNumbers.length; + while (i < 7) { + randNum = Math.floor(Math.random() * 10 + 1); + if (i == 0) { + randNumbers[i] = randNum; + } else { + if (randNumbers.indexOf(randNum) == -1) { + randNumbers[i] = randNum; + } else { + i--; + } + } + i++; + } + + return randNumbers; +} +console.log(sevenRandomNumbers()); +function sevenRandomNumber() { + const randNumbers = []; + while (array.length < 7) { + const random = Math.floor(Math.random() * 9); + if (randNumbers.indexOf(random) === -1) { + randNumbers.push(random); + } + } + console.log(randNumbers); + return randNumbers; +} + +sevenRandomNumber(); + +/* + *** QUESTION 7: Sum *** + */ +console.log('*** QUESTION 7: Sum of any number of arguments***'); +const sumOfArgs = (...args) => { + let total = 0; + args.forEach(arg => (total += arg)); + return total; +}; +console.log(sumOfArgs(1, 2, 3)); +console.log(sumOfArgs(1, 2, 3, 4)); + +function sum() { + let total = 0; + Array.from(arguments).forEach(arg => (total += arg)); + return total; +} + +console.log(sum(1, 2, 3)); +console.log(sum(1, 2, 3, 4)); +/* + *** QUESTION 8: Replace the middle item with three items*** + */ +console.log('*** QUESTION 8: Replace the middle item with three items***'); +const removeMiddleItem = (arr, itemOne, itemTwo, itemThree) => { + let arrayLen = arr.length; + let middleIndex; + if (arrayLen % 2 === 0) { + middleIndex = arrayLen / 2 - 1; + arr.splice(middleIndex, 2, itemOne, itemTwo, itemThree); + } else { + middleIndex = (arrayLen + 1) / 2 - 1; + arr.splice(middleIndex, 1, itemOne, itemTwo, itemThree); + } + return arr; +} +console.log(removeMiddleItem([1, 2, 3], 'item 1', 'item2', 'item3')); +console.log(removeMiddleItem([1, 2, 3, 4], 'item 1', 'item2', 'item3')); +console.log(removeMiddleItem([1, 2, 3], 4, 5, 6)); +/* + *** QUESTION 9: Extract numbers from text *** + */ +console.log('*** QUESTION 9: Extract numbers from a text ***'); +const calculateAnnualIncome = () => { + const pattern = /[0-9]+/g; + const incomes = 'He earns 5000 euro from salary per month, 10000 euro annual bonus, 15000 euro online courses per month.'.match( + pattern + ); + let sum = 0; + incomes.forEach((income, i) => { + if (i == 0 || i == 2) { + sum += parseFloat(income) * 12; + } else { + sum += parseFloat(income); + } + }); + return sum; +} +console.log(calculateAnnualIncome()); +/* + *** QUESTION 10: Check if a sub string is an end of a text *** + */ +console.log('*** QUESTION 10: Check if a sub string is an end of a text ***'); +const checkEndOfString = (mainString, subString) => { + return mainString.endsWith(subString); +} +console.log(checkEndOfString('integrity', 'ity')); +console.log(checkEndOfString('integration', 'tio')); diff --git a/solutions/javascript-test-2020.js b/solutions/javascript-test-2020.js new file mode 100644 index 0000000..f98754d --- /dev/null +++ b/solutions/javascript-test-2020.js @@ -0,0 +1,780 @@ +console.log('==================== BEGIN Q1 ============================ ') +/* === Question 1 === */ +// 1. 1 +const printHashes = () => { + let hash = '' + for (let i = 0; i < 7; i++) { + hash += '#' + console.log(hash) + } +} + +printHashes() +console.log('----------------------------------------------------------- ') + +// 1. 2 +const multiplicationTable = n => { + for (let i = 0; i < n; i++) { + console.log(`${i} * ${i} = ${i * i}`) + } +} + +multiplicationTable(11) +console.log('----------------------------------------------------------- ') + +// 1. 3 +const exponentialTable = () => { + console.log(`i\ti^2\t^3`) + for (let i = 0; i < 11; i++) { + console.log(`${i}\t${i ** 2}\t${i ** 3}`) + } +} + +exponentialTable() +console.log('----------------------------------------------------------- ') + +// 1. 4 +const countries = [ + 'ALBANIA', + 'BOLIVIA', + 'CANADA', + 'DENMARK', + 'ETHIOPIA', + 'FINLAND', + 'GERMANY', + 'HUNGARY', + 'IRELAND', + 'JAPAN', + 'KENYA' +] +// const createArrayOfArrays = arr => { +// const newArray = [] +// for (const element of arr) { +// let name = element[0] + element.slice(1).toLowerCase() +// newArray.push([name, element.slice(0, 3), element.length]) +// } +// return newArray +// } + +const createArrayOfArrays = arr => + arr.map(country => { + let name = country[0] + country.slice(1).toLowerCase() + return [name, country.slice(0, 3), country.length] + }) + +console.log(createArrayOfArrays(countries)) + +console.log('==================== END Q1 ============================ ') + +console.log('==================== BEGIN Q2 ============================ ') +/* === Question 2 === */ +// 2. 1 +const products = [ + { product: 'banana', price: 3 }, + { product: 'mango', price: 6 }, + { product: 'potato', price: ' ' }, + { product: 'avocado', price: 8 }, + { product: 'coffee', price: 10 }, + { product: 'tea', price: '' } +] + +const printProductItems = arr => { + for (const { product, price } of arr) { + let formattedPrice = typeof price == 'number' ? price : 'unknown' + console.log(`The price of ${product} is ${formattedPrice}`) + } +} + +printProductItems(products) +console.log('----------------------------------------------------------- ') + +// 2. 2 +const sumOfAllPrices = arr => { + let total = 0 + for (const { price } of arr) { + if (typeof price == 'number') { + total += price + } + } + return total +} + +console.log('the sum of all prices using for of', sumOfAllPrices(products)) +console.log('----------------------------------------------------------- ') + +// 2. 3 +const total = products + .map(prod => prod.price) + .filter(price => typeof price == 'number') + .reduce((curr, acc) => curr + acc) + +console.log('total from method chaining', total) +console.log('----------------------------------------------------------- ') + +// 2. 4 +const totalUsingReduce = products.reduce((accu, curr) => { + let price = typeof curr.price == 'number' ? curr.price : 0 + return accu + price +}, 0) + +console.log('reduce total', totalUsingReduce) +console.log(sumOfAllPrices(products)) +console.log('==================== END Q2 ============================ ') + +console.log('==================== BEGIN Q3 ============================ ') +/*=== Question 3 === */ + +// 3. 1 +const howManyDaysInMonth = () => { + const userInput = prompt('Enter a month: ') + .trim() + .toLowerCase() + + const firstLetter = userInput[0].toUpperCase() + const remainingStr = userInput.slice(1) + const month = firstLetter + remainingStr + + let statement + let days + switch (userInput) { + case 'february': + days = 28 + statement = `${month} has ${days} days.` + break + case 'april': + case 'june': + case 'september': + case 'november': + days = 30 + statement = `${month} has ${days} days.` + break + case 'january': + case 'march': + case 'may': + case 'july': + case 'august': + case 'october': + case 'december': + days = 31 + statement = `${month} has ${days} days.` + break + default: + return 'The given value is not a month' + } + return statement +} + +console.log(howManyDaysInMonth()) +console.log('----------------------------------------------------------- ') + +// 3. 2 +const generate = (type = 'id') => { + const randomId = (n = 6) => { + const str = '0123456ABCDEFGHIJKLMNOPKRSTUVWXYZabcdefghihjklmnopqrstuvwxyz' + let id = '' + for (let i = 0; i < n; i++) { + let index = Math.floor(Math.random() * str.length) + id = id + str[index] + } + return id + } + + const hexaColor = function() { + let st = '0123456789abcdef'.split('') + let color = '#' + for (let i = 0; i < 6; i++) { + let index = Math.floor(Math.random() * st.length) + color += st[index] + } + return color + } + + const rgbColor = function() { + let redColor = Math.floor(Math.random() * 256) + let greenColor = Math.floor(Math.random() * 256) + let blueColor = Math.floor(Math.random() * 256) + + const rgb = `rgb(${redColor},${greenColor},${blueColor})` + return rgb + } + switch (type.toLowerCase()) { + case 'id': + return randomId() + case 'hexa': + case 'hexadecimal': + return hexaColor() + case 'rgb': + return rgbColor() + default: + return 'Not a valid format' + } +} + +console.log(generate()) +console.log(generate('id')) +console.log(generate('hexa')) +console.log(generate('hexadecimal')) +console.log(generate('rgb')) +console.log(generate('RGB')) +console.log(generate('rgb')) + +console.log('==================== END Q3 ============================ ') + +console.log('==================== BEGIN Q4 ============================ ') + +/*=== Question 4 ==== */ + +// 4. 1 +const countries2 = [ + 'ALBANIA', + 'BOLIVIA', + 'CANADA', + 'DENMARK', + 'ETHIOPIA', + 'FINLAND', + 'GERMANY', + 'HUNGARY', + 'IRELAND', + 'JAPAN', + 'KENYA' +] + +const c = ['ESTONIA', 'FRANCE', 'GHANA'] +countries2.splice(4, 3, ...c) +console.log(countries2) +console.log('----------------------------------------------------------- ') + +// 4. 2 +const checkUniqueness = arr => { + for (const element of arr) { + if (arr.indexOf(element) !== arr.lastIndexOf(element)) { + return false + } + } + return true +} +const arrOne = [1, 4, 6, 2, 1] +console.log(checkUniqueness(arrOne)) // false +const arrTwo = [1, 4, 6, 2, 3] +console.log(checkUniqueness(arrTwo)) // true +console.log('----------------------------------------------------------- ') + +// 4. 3 +const checkDataTypes = (arr, type) => arr.every(elem => typeof elem === type) + +const numbers = [1, 3, 4] +const names = ['Asab', '30DaysOfJavaScript'] +const bools = [true, false, true, true, false] +const mixedData = ['Asab', 'JS', true, 2019, { name: 'Asab', lang: 'JS' }] +const obj = [{ name: 'Asab', lang: 'JS' }] +console.log(checkDataTypes(numbers, 'number')) // true +console.log(checkDataTypes(numbers, 'string')) // false +console.log(checkDataTypes(names, 'string')) // true +console.log(checkDataTypes(bools, 'boolean')) // true +console.log(checkDataTypes(mixedData, 'boolean')) // false +console.log(checkDataTypes(obj, 'object')) // true + +console.log('==================== END Q4 ============================ ') + +console.log('==================== BEGIN Q5 ============================ ') +/*=== Question 5 ==== */ + +// 5. 1 +const fullStack = [ + ['HTML', 'CSS', 'JS', 'React'], + ['Node', 'Express', 'MongoDB'] +] +const [frontEnd, backEnd] = fullStack +console.log(frontEnd, backEnd) +console.log('----------------------------------------------------------- ') + +// 5. 2 +const student = ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]] +const [ + name, + [html, css, js, react], + [htmlScore, cssScore, jsScore, reactScore] +] = student +console.log( + name, + html, + css, + js, + react, + htmlScore, + cssScore, + jsScore, + reactScore +) +console.log('----------------------------------------------------------- ') + +// 5. 3 +const students = [ + ['David', ['HTM', 'CSS', 'JS', 'React'], [98, 85, 90, 95]], + ['John', ['HTM', 'CSS', 'JS', 'React'], [85, 80, 85, 80]] +] + +// one way +// const convertArrayToObject = arr => { +// const newArray = [] +// for (const [name, skills, scores] of arr) { +// newArray.push({ name, skills, scores }) +// } +// return newArray +// } + +// another way +const convertArrayToObject = arr => + arr.map(([name, skills, scores]) => { + return { name, skills, scores } + }) + +console.log(convertArrayToObject(students)) +console.log('==================== END Q5 ============================ ') + +console.log('==================== BEGIN Q6 ============================ ') +/*=== Question 6 ==== */ + +// 6. 1 +const sumOfAllNums = (...args) => { + let sum = 0 + for (const element of args) { + sum += element + } + return sum +} + +console.log(sumOfAllNums(2, 3, 1)) // 6 +console.log(sumOfAllNums(1, 2, 3, 4, 5)) // 15 +console.log(sumOfAllNums(1000, 900, 120)) // 2020 + +function sumOfAllNums2() { + let sum = 0 + for (let i = 0; i < arguments.length; i++) { + sum += arguments[i] + } + return sum +} + +console.log(sumOfAllNums2(2, 3, 1)) // 6 +console.log(sumOfAllNums2(1, 2, 3, 4, 5)) // 15 +console.log(sumOfAllNums2(1000, 900, 120)) // 2020 +console.log('----------------------------------------------------------- ') + +// 6. 2 +const [x, y] = [2, a => a ** 2 - 4 * a + 3] +const valueOfX = x // 2 +const valueOfY = y // (a) => a ** 2 - 4 * a + 3 +console.log(valueOfX, valueOfY) +console.log(y(x)) // -1 +console.log('----------------------------------------------------------- ') + +// 6. 3 + +const studentObj = { + name: 'David', + age: 25, + skills: { + frontEnd: [ + { skill: 'HTML', level: 10 }, + { skill: 'CSS', level: 8 }, + { skill: 'JS', level: 8 }, + { skill: 'React', level: 9 } + ], + backEnd: [ + { skill: 'Node', level: 7 }, + { skill: 'GraphQL', level: 8 } + ], + dataBase: [{ skill: 'MongoDB', level: 7.5 }], + dataScience: ['Python', 'R', 'D3.js'] + } +} +const devOps = [ + { skill: 'AWS', level: 7 }, + { skill: 'Jenkin', level: 7 }, + { skill: 'Git', level: 8 } +] +const copiedStudentObj = { + ...studentObj, + skills: { + ...studentObj.skills, + frontEnd: [...studentObj.skills.frontEnd, { skill: 'Bootstrap', level: 8 }], + backEnd: [...studentObj.skills.backEnd, { skill: 'Express', level: 8 }], + dataBase: [...studentObj.skills.dataBase, { skill: 'SQL', level: 8 }], + dataScience: [...studentObj.skills.dataScience, 'SQL'], + devOps: [...devOps] + } +} +console.log(copiedStudentObj) +console.log('==================== END Q6 ============================ ') + +console.log('==================== BEGIN Q7 ============================ ') +/*=== Question 7 ==== */ + +// 7. 1 +const showDateTime = (format = 'dd/mm/yyyy') => { + const months = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' + ] + const now = new Date() + const year = now.getFullYear() + const month = months[now.getMonth()] + const mm = now.getMonth() + 1 + const date = now.getDate() + const dd = now.getDate() + let hours = now.getHours() + let hh = now.getHours() + let minutes = now.getMinutes() + + let seconds = now.getSeconds() + if (hours < 10) { + hours = '0' + hours + } + if (minutes < 10) { + minutes = '0' + minutes + } + if (seconds < 10) { + seconds = '0' + seconds + } + + const dateMonthYear = `${month} ${date}, ${year}` + + const time = hours + ':' + minutes + const fullTime = dateMonthYear + ' ' + time + // return fullTime + `:${seconds}` + switch (format) { + case 'dd/mm/yyyy': + return `${dd}/${mm}/${year}` + case 'dd-mm-yyyy': + return `${dd}-${mm}-${year}` + case 'dd/mm/yyyy hh:mm': + return `${dd}/${mm}/${year} ${hours}:${minutes}` + case 'dd-mm-yyyy hh:mm': + return `${dd}-${mm}-${year} ${hours}:${minutes}` + case 'MMM DD, YYYY': + return `${month} ${dd}, ${year}` + case 'MMM DD, YYYY hh:mm': + return `${month} ${dd}, ${year} ${hours}:${minutes}` + + default: + return `${dd}/${mm}/${year}` + } +} + +console.log(showDateTime()) +console.log(showDateTime('dd-mm-yyyy')) +console.log(showDateTime('dd-mm-yyyy hh:mm')) +console.log(showDateTime('dd/mm/yyyy hh:mm')) +console.log(showDateTime('Month DD, YYYY')) +console.log(showDateTime('MMM DD, YYYY hh:mm')) +console.log('----------------------------------------------------------- ') +// 7. 1 + +const todoList = [ + { + task: 'Prepare JS Test', + time: '5/4/2020 8:30', + completed: true + }, + { + task: 'Give JS Test', + time: '6/4/2020 10:00', + completed: false + }, + { + task: 'Assess Test Result', + time: '4/3/2019 1:00', + completed: false + } +] + +const addTask = task => { + const time = showDateTime('dd-mm-yyyy hh:mm') + const completed = false + todoList.push({ task, time, completed }) +} + +const removeTask = index => { + todoList.splice(index, 1) +} + +const editTask = (index, newTask) => { + todoList[index].task = newTask + todoList.push({ task, time, completed }) +} +const toggleTask = index => { + todoList[index].completed = !todoList[index].completed +} + +const toggleAll = () => { + const checkCompleted = todoList.filter(todo => todo.completed === true).length + if (checkCompleted.length === todoList.length) { + for (const item of todoList) { + item.completed = !item.completed + } + } else { + for (const item of todoList) { + item.completed = true + } + } +} + +console.log(todoList) + +toggleAll() +console.log(todoList) + +const removeAll = () => { + // todoList = [] + todoList.splice() +} +console.log('==================== END Q7 ============================ ') + +console.log('==================== BEGIN Q8 ============================ ') + +/*=== Question 8 ==== */ + +// 8. 1 + +// generic function to sort items both for string and number +const sortItems = (arr, key) => { + const copiedArr = [...arr] + copiedArr.sort((a, b) => { + if (a[key] > b[key]) return -1 + if (a[key] < b[key]) return 1 + else return 0 + }) + return copiedArr +} + +const largestCountries = async (n = 10) => { + const API_URL = 'https://restcountries.eu/rest/v2/all' + const countriesArea = [] + const response = await fetch(API_URL) + const data = await response.json() + + for (const { name, area } of data) { + countriesArea.push({ country: name, area }) + } + + const countriesSortedByArea = sortItems(countriesArea, 'area').slice(0, n) + console.log(`${n} most largest countries`, countriesSortedByArea) +} + +largestCountries(10) + +const numberOfLanguages = async () => { + const API_URL = 'https://restcountries.eu/rest/v2/all' + const langSet = new Set() + const response = await fetch(API_URL) + const data = await response.json() + + for (const { languages } of data) { + for (const { name } of languages) { + langSet.add(name) + } + } + + console.log(Array.from(langSet).sort()) + console.log( + 'Total number of langauges in the countries API:', + Array.from(langSet).length + ) + console.log('----------------------------------------------------------- ') +} +numberOfLanguages() + +const mostSpokenLanguages = async (n = 10) => { + const API_URL = 'https://restcountries.eu/rest/v2/all' + const langSet = new Set() + const allLangArr = [] + const languageFrequency = [] + + try { + const response = await fetch(API_URL) + const data = await response.json() + + for (const { languages } of data) { + for (const { name } of languages) { + allLangArr.push(name) + langSet.add(name) + } + } + + for (l of langSet) { + const x = allLangArr.filter(ln => l == ln) + languageFrequency.push({ + lang: l, + count: x.length + }) + } + + const sortedLanguages = sortItems(languageFrequency, 'count').slice(0, n) + console.log(`${n} most spoken languages`, sortedLanguages) + } catch { + console.log('Something goes wrong') + } + console.log('----------------------------------------------------------- ') +} + +console.log('Most spoken languages', mostSpokenLanguages(15)) + +// 8.2 + +const add = (a, b) => { + if (b) { + return a + b + } + if (!a) { + return 'at least one parameter is required' + } + return b => a + b +} +console.log(add(2, 3)) +console.log(add()) +console.log(add(2)(3)) + +console.log('==================== END Q8 ============================ ') + +console.log('==================== BEGIN Q9 ============================ ') + +/*=== Question 9 ==== */ +/* +9.1 What is the difference between forEach, map, filter and reduce? (1 pt) +9.2 What is the difference between find and filter? (1pt) +9.3 Which of the following mutate array: map, filter, reduce, slice, splice, concat, sort, some? (2pt) only splice and sort modify an array +*/ + +const generateColor = (type = 'hexa', n = 1) => { + const hexaColor = function() { + let st = '0123456789abcdef'.split('') + let color = '#' + for (let i = 0; i < 6; i++) { + let index = Math.floor(Math.random() * st.length) + color += st[index] + } + return color + } + + const rgbColor = function() { + let redColor + let greenColor + let blueColor + + redColor = Math.floor(Math.random() * 256) + greenColor = Math.floor(Math.random() * 256) + blueColor = Math.floor(Math.random() * 256) + const rgb = `rgb(${redColor},${greenColor},${blueColor})` + return rgb + } + + const rgbColors = [] + const hexaColors = [] + if (n > 1) { + if (type == 'hexa') { + for (let i = 0; i < n; i++) { + hexaColors.push(hexaColor()) + } + } else if (type == 'rgb') { + for (let i = 0; i < n; i++) { + rgbColors.push(rgbColor()) + } + } + } + + switch (type) { + case 'hexa': + const hexa = n > 1 ? hexaColors : hexaColor() + return hexa + case 'rgb': + const rgb = n > 1 ? rgbColors : rgbColor() + return rgb + default: + return hexaColor() + } +} + +console.log(generateColor()) +console.log(generateColor('hexa')) +console.log(generateColor('rgb')) +console.log(generateColor('hexa', 3)) +console.log(generateColor('rgb', 3)) +console.log('==================== END Q9 ============================ ') + +console.log('==================== BEGIN Q10 ============================ ') + +/*=== Question 10 ==== */ + +const para = `Studies that estimate and rank the most common words in English examine texts written in English. Perhaps the most comprehensive such analysis is one that was conducted against the Oxford English Corpus (OEC), a very large collection of texts from around the world that are written in the English language. A text corpus is a large collection of written works that are organised in a way that makes such analysis easier.` + +const cleanText = txt => { + const pattern = /[^\w ]/g + return txt.replace(pattern, '') +} + +const mostFrequentWord = (txt, n = 10) => { + const cleanedText = cleanText(txt) + const words = cleanedText.split(' ') + const map = new Map() + for (const word of words) { + if (map.has(word)) { + let count = map.get(word.toLowerCase()) + 1 + map.set(word.toLowerCase(), count) + } else { + map.set(word.toLowerCase(), 1) + } + } + + return Array.from(map) + .map(([word, count]) => { + return { word, count } + }) + .slice(0, n) +} + +console.log('Most frequent words', sortItems(mostFrequentWord(para), 'count')) +console.log('----------------------------------------------------------- ') + +// 10. 2 +const sentence = `@He@ @%met%^$##%# his mom at no@on and s@he was watching %^$#an epso@ide%^$# of the begni@nging of her Sol@os. Her te@net%^$# hel@ped %^$#her to le@vel up her stats. %^$#After that h@e went to %^$#kayak driving Civic %^$#Honda.` + +const cleanedText = cleanText(sentence) +console.log(cleanedText) +console.log('----------------------------------------------------------- ') + +// 10. 3 +const checkPalindrome = param => { + const word = typeof param == 'number' ? param.toString() : param + let invertedWord = '' + for (let i = word.length - 1; i >= 0; i--) { + invertedWord += word[i] + } + return word.toLowerCase() === invertedWord.toLowerCase() +} + +console.log('Check palindrome the number 123:', checkPalindrome(323)) +console.log('Check palindrome the word anna:', checkPalindrome('anna')) +console.log('Check palindrome the word He:', checkPalindrome('He')) +console.log('----------------------------------------------------------- ') + +// 10.4 +const words = cleanText(sentence).split(' ') +const palindromes = words.filter(word => checkPalindrome(word)) +const numberOfPalindromes = palindromes.length +console.log( + 'Total number of palindrome words in the text:', + numberOfPalindromes +) + +console.log('==================== END Q10 ============================ ') diff --git a/solutions/javascript-test-3.js b/solutions/javascript-test-3.js new file mode 100644 index 0000000..02cbe4c --- /dev/null +++ b/solutions/javascript-test-3.js @@ -0,0 +1,449 @@ +/* =============================== QUESTION 1 ================================================ + Write a function which count the number of occurrence of a word in a paragraph or a sentence. + The function countWords takes a paragraph and word as parameters. + ============================================================================================= */ +const paragraph = + 'I love teaching. If you do not love teaching what else can you love. I love JavaScript if you do not love something which can give life to your application what else can you love.'; +//Method one +const countWords1 = (para, wrd) => { + const pattern = new RegExp(wrd, 'gi'); //creating regex object using RegExp constructor + const matches = para.match(pattern) || []; // if the para.match returns null, matches result will be en empty array + return matches.length; // geting the length of the array +}; +console.log(countWords1(paragraph, 'love')); + +//Method +const countWords2 = (para, wrd) => { + let count = 0; + const words = para.split(' '); // spliting the paragraph into array of words + //iterating through words array and checking if the target word is in the array + for (const word of words) { + //includes or startsWith could give the same result + if (word.toLowerCase().includes(wrd.toLowerCase())) { + console.log(word); + count++; + } + } + return count; +}; +console.log(countWords2(paragraph, 'love')); + +/* ======================================== QUESTION 2 ====================================================== + Write a function which takes an array as a parameter and returns an array of the data types of each item: + ========================================================================================================== */ +const arr = ['Asabeneh', 100, true, null, undefined, { job: 'teaching' }]; +const checkDataTypes = arr => { + const dataTypes = []; // creating an empty array + let type; // will be used in the loop to store the data type of each element in the array + for (const element of arr) { + type = typeof element; // type checking of each elements + dataTypes.push(type); + } + return dataTypes; // returning the above array which contains all the datatypes of the elements +}; +console.log(checkDataTypes(arr)); + +/* ========================= QUESTION 3 ============================== + Create a function which filter ages greater than 18 from ages array. + const ages = [35, 30, 17, 18, 15, 22, 16, 20]; + console.log(agesGreaterEighteen(ages)); + [35, 30, 22, , 20]; + =================================================================== */ + +const ages = [35, 30, 17, 18, 15, 22, 16, 20]; +const agesGreaterEighteen = ages => { + const agesGreater18 = []; // creating an empty array to store ages which are abover 18 + //iterating through the ages array + for (const age of ages) { + //checking if the age if it is greater than 18 + if (age > 18) { + agesGreater18.push(age); // + } + } + return agesGreater18; +}; +console.log(agesGreaterEighteen(ages)); +/* ======================== QUESTION 4 =========================== + Write a function which calculate the average age of the group. + ================================================================ */ +const averageAge = ages => { + let sum = 0; // an accumulator to sum all the ages + for (const age of ages) { + // adding each age to the sum varaible + sum += age; + } + return Math.round(sum / ages.length); // rounding the number to the closest integer +}; +console.log(averageAge(ages)); + +/* ======================== QUESTION 5 =========================== + Write a function which remove an item or items from the middle of the array and replace with two items + ================================================================ */ +const products = ['Milk', 'Coffee', 'Tea', 'Honey', 'Meat', 'Cabage']; +const removeMiddleItem = (arr, ...items) => { + let middleIndex; // to store the middle index of the array, + if (arr.length % 2 === 0) { + //if the array length is even + middleIndex = arr.length / 2 - 1; + //splice takes starting point, number of items to remove and items to replace + arr.splice(middleIndex, 2, ...items); + } else { + //if the array length is odd + middleIndex = Math.floor(arr.length / 2); + console.log(middleIndex); + arr.splice(middleIndex, 1, ...items); + } + + return arr; +}; +console.log(removeMiddleItem(products, 'potato', 'banana')); + +/* ====================== QUESTION 6 ============================================== + Write a function which can generate a random Finnish car code(Car plate number). + console.log(genCarPlateNum()) + AFG-205 + console.log(genCarPlateNum()) + JCB-586 + ================================================================================ */ + +const genCarPlateNum = () => { + const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const numbers = '0123456789'; + let lettersPart = ''; // variable to store, the letters part + let numbersPart = ''; // variable to store, the letters part + let indexOne; // random index to extract one of the letter at a time from letters array + let indexTwo; // random index to extract one of the number at a time from numbers array + for (let i = 0; i < 3; i++) { + indexOne = Math.floor(Math.random() * letters.length); + indexTwo = Math.floor(Math.random() * numbers.length); + lettersPart += letters[indexOne]; + numbersPart += numbers[indexTwo]; + } + return `${lettersPart}-${numbersPart}`; +}; +console.log(genCarPlateNum()); +/* ======================================= QUESTION 7 ============================================= + The following shopping cart has four products. + Create an addProduct, removeProduct ,editProduct , removeAll functions to modify the shopping cart. + const shoppingCart = ['Milk','Coffee','Tea', 'Honey']; + addProduct( "Meat"); + ["Milk", "Coffee", "Tea", "Honey", "Meat"] + editProduct(3, "Sugar" ); + ["Milk", "Coffee", "Tea", "Sugar", "Meat"] + removeProduct(0); + ["Coffee", "Tea", "Sugar", "Meat"] + removeProduct(3); + ["Coffee", "Tea", "Sugar"] + ================================================================================================= */ +const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']; +const addProduct = (products, product) => { + products.push(product); + return products; +}; +addProduct(shoppingCart, 'Meat'); +console.log(shoppingCart); +const editProduct = (products, index, product) => { + products[index] = product; + return products; +}; +editProduct(shoppingCart, 3, 'Sugar'); +console.log(shoppingCart); +const removeProduct = index => { + shoppingCart.splice(index, 1); + return shoppingCart; +}; +removeProduct(0); +console.log(shoppingCart); +removeProduct(3); +console.log(shoppingCart); + +/* ======================== QUESTION 8 ======================================== + Write a function which can generate a random Finnish social security number. + console.log(genSocialSecurityNum()) + 220590 - 255H + console.log(genSocialSecurityNum()) + 190395 - 225J + ============================================================================= */ +const genSocialSecurityNum = () => { + const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const numbers = '0123456789'; + let index = Math.floor(Math.random() * letters.length); + const letter = letters[index]; // getting a letter from the letters array + let date = Math.floor(Math.random() * 31) + 1; // date from 1 to 31 + let month = Math.floor(Math.random() * 12) + 1; // month from 1 to 12 + + //if the date or month is less than 10 + if (date < 10) date = '0' + date; + if (month < 10) month = '0' + month; + + let year = Math.floor(Math.random() * 2019); + if (year > 100) { + year = year.toString().substr(-2); + } else if (year < 10) { + year = '0' + year; + } + + let suffix = ''; + for (let i = 0; i < 3; i++) { + let randomIndex = Math.floor(Math.random() * numbers.length); + suffix += numbers[randomIndex]; + } + + return `${date}${month}${year}-${suffix}${letter}`; +}; +console.log(genSocialSecurityNum()); + +/* ========================================= QUESTION 9 ======================================================= + The following todoList has three tasks. + Create an addTask, removeTask, editTask, toggleTask, toggleAll, removeAll functions to modify the todoList. + const todoList = [ + { + task:'Prepare JS Test', + time:'4/3/2019 8:30', + completed:true + + }, + { + task:'Give JS Test', + time:'4/3/2019 10:00', + completed:false + + }, + { + task:'Assess Test Result', + time:'4/3/2019 1:00', + completed:false + + }] +========================================================================================================= */ +const todoList = [ + { + task: 'Prepare JS Test', + time: '4/3/2019 8:30', + completed: true + }, + { + task: 'Give JS Test', + time: '4/3/2019 10:00', + completed: false + }, + { + task: 'Assess Test Result', + time: '4/3/2019 1:00', + completed: false + } +]; + +// function to generate date, month, year, hour and minute : day/month/year hh:mm +const displayDateTime = () => { + const now = new Date(); + const year = now.getFullYear(); + const month = now.getMonth() + 1; + const date = now.getDate(); + const hours = now.getHours(); + let minutes = now.getMinutes(); + if (minutes < 10) { + minutes = '0' + minutes; + } + return `${date}/${month}/${year} ${hours}:${minutes}`; +}; + +const addTask = task => { + const time = displayDateTime(); + const completed = false; + const newTask = { task, time, completed }; + todoList.push(newTask); +}; +const editTask = (index, task) => { + todoList[index].task = task; +}; + +const removeTask = index => { + todoList.splice(index, 1); +}; +const toggleTask = (index, task) => { + todoList[index].completed = !todoList[index].completed; +}; +const toggleAll = arr => { + let completedTodos = 0; + for (let i = 0; i < arr.length; i++) { + if (arr[i].completed) { + completedTodos++; + } + if (completedTodos === arr.length) { + for (let i = 0; i < arr.length; i++) { + arr[i].completed = !arr[i].completed; + } + } else { + for (let i = 0; i < arr.length; i++) { + arr[i].completed = true; + } + } + } + return arr; +}; +console.log(toggleAll(todoList)); +const removeAll = () => { + todoList = []; + return todoList; +}; +console.log(todoList); + +/* ========================= QUESTION 10 ========================= + Write a function which check if items of an array are unique? + const arrOne = [1, 4, 6, 2, 1]; + console.log(checkUniqueness(arrOne)); + false + const arrTwo = [1, 4, 6, 2, 3] + console.log(checkUniqueness(arrTwo)); + true +================================================================== */ +const checkUniqueness = arr => { + let uniquenesFlag = true; + for (const element of arr) { + if (arr.indexOf(element) !== arr.lastIndexOf(element)) { + uniquenesFlag = false; + break; + } + } + return uniquenesFlag; +}; +const arrOne = [1, 4, 6, 2, 1]; +console.log(checkUniqueness(arrOne)); + +const arrTwo = [1, 4, 6, 2, 3]; +console.log(checkUniqueness(arrTwo)); +/* ====================== QUESTION 11 ========================================================== + Write a function named shuffle, it takes an array parameter and it returns a shuffled array. + ============================================================================================= */ +const shuffle = arr => { + const shuffledArray = []; // empty array to store shaffled array + let index; // random index which we use to take element from the original array + let element; // the item we get using the random index will be stored in element + while (shuffledArray.length !== arr.length) { + index = Math.floor(Math.random() * arr.length); + element = arr[index]; + if (shuffledArray.indexOf(element) === -1) { + shuffledArray.push(element); + } + } + return shuffledArray; +}; +console.log(shuffle([1, 2, 3, 4, 5])); + +/* =============================== Bonus ============================================= + Write a function which filter users who has scoresGreaterThan85. + Write a function which addUser to the user array only if the user does not exist. + Write a function which addUserSkill which can add skill to a user only if the user exist. + Write a function which editUser if the user exist in the users array. + ========================================================================================== */ +const users = [ + { + name: 'Brook', + scores: 75, + skills: ['HTM', 'CSS', 'JS'], + age: 16 + }, + { + name: 'Alex', + scores: 80, + skills: ['HTM', 'CSS', 'JS'], + age: 18 + }, + { + name: 'David', + scores: 75, + skills: ['HTM', 'CSS'], + age: 22 + }, + { + name: 'John', + scores: 85, + skills: ['HTM'], + age: 25 + }, + { + name: 'Sara', + scores: 95, + skills: ['HTM', 'CSS', 'JS'], + age: 26 + }, + { + name: 'Martha', + scores: 80, + skills: ['HTM', 'CSS', 'JS'], + age: 18 + }, + { + name: 'Thomas', + scores: 90, + skills: ['HTM', 'CSS', 'JS'], + age: 20 + } +]; + +const scoresGreaterThan85 = arr => { + const scores = []; + for (const element of arr) { + if (element.scores > 85) { + scores.push(element.scores); + } + } + return scores; +}; + +console.log(scoresGreaterThan85(users)); +const newUser = { + name: 'Asabeneh', + scores: 800, + skills: ['HTML', 'CSS', 'JS'], + age: 250 +}; +const addUser = (arr, newUser) => { + for (const user of arr) { + if (user['name'] === newUser.name) { + return ' A user does exist'; + } + } + arr.push(newUser); + return arr; +}; +console.log(addUser(users, newUser)); + +const addUserSkill = (arr, name, skill) => { + let found = false; + for (const user of arr) { + if (user['name'] === name) { + user.skills.push(skill); + found = true; + break; + } + } + if (!found) { + return 'A user does not exist'; + } + + return arr; +}; +console.log(addUserSkill(users, 'Brook', 'Node')); + +const editUser = (arr, name, newUser) => { + let found = false; + for (const user of arr) { + if (user['name'] === name) { + user.name = newUser.name; + user.scores = newUser.scores; + user.skills = newUser.skills; + user.age = newUser.age; + found = true; + break; + } + } + if(!found) { + return 'A user does not exist'; + } + + return arr; +}; +console.log(editUser(users, "Brook", newUser)); +console.log(users); diff --git a/solutions/javascript-test-4.js b/solutions/javascript-test-4.js new file mode 100644 index 0000000..e40fae8 --- /dev/null +++ b/solutions/javascript-test-4.js @@ -0,0 +1,420 @@ +/* =============================== QUESTION 1 ================================================ + Create a function which solve quadratic equation ax2 + bx + c = 0. + A quadratic equation may have one, two or no solution. + The function should return a set of the solution(s). + ============================================================================================ */ +const solveQuadratic = (a = 1, b = 0, c = 0) => { + if (a === 0) { + return 'Not a quadratic equation'; + } + const determinate = b ** 2 - 4 * a * c; + const solnSet = new Set(); + + let root1, root2; + if (determinate === 0) { + root1 = -b / (2 * a); + solnSet.add(root1); + } else if (determinate > 0) { + root1 = ((-b + Math.sqrt(determinate)) / 2) * a; + root2 = ((-b - Math.sqrt(determinate)) / 2) * a; + solnSet.add(root1); + solnSet.add(root2); + } else { + } + return solnSet; +}; +console.log(solveQuadratic()); //Set(1) {0} +console.log(solveQuadratic(1, 2, 3)); // Set(0) {} +console.log(solveQuadratic(1, 4, 4)); //Set(1) {-2} +console.log(solveQuadratic(1, -1, -2)); //{2, -1} +console.log(solveQuadratic(1, 7, 12)); //Set(2) {-3, -4} +console.log(solveQuadratic(1, 0, -4)); //{2, -2} +console.log(solveQuadratic(1, -1, 0)); //{1, 0} +/* =============================== QUESTION 2 ================================================ + Create a function called isPrime which check if a number is prime or not. + ============================================================================================*/ +const isPrime = n => { + let prime = false; + if (n < 2) { + prime = false; + } + if (n === 2) { + prime = true; + } + for (let i = 2; i < n; i++) { + if (n % i === 0) { + prime = false; + break; + } else { + prime = true; + } + } + return prime; +}; + +console.log(isPrime(0)); // false +console.log(isPrime(1)); // false +console.log(isPrime(2)); // true +console.log(isPrime(3)); // true +console.log(isPrime(5)); // true + +/* =============================== QUESTION 3 ================================================ + Write a function rangeOfPrimes. + It takes two parameters, a starting number and an ending number . + The function returns an object with properties primes and count. + The primes value is an array of prime numbers and + count value is the number of prime numbers in the array. + See example + ============================================================================================ */ + +const rangeOfPrimes = (start, end) => { + const primes = []; + for (let i = start; i <= end; i++) { + if (isPrime(i)) { + primes.push(i); + } + } + const count = primes.length; + return { primes, count }; +}; +console.log(rangeOfPrimes(2, 11)); //{primes:[2, 3, 5, 7, 11], count:5} +console.log(rangeOfPrimes(50, 60)); //{primes:[53, 59], count:2} +console.log(rangeOfPrimes(95, 107)); //{primes:[97, 101, 103, 107], count:4} +/* =============================== QUESTION 4 ================================================ + Create a function called isEmpty which check if the parameter is empty. + If the parameter is empty, it returns true else it returns false. + ============================================================================================ */ +const isEmpty = value => { + return ( + value === null || + value === undefined || + (typeof value === 'string' && value.trim().length === 0) || + (value.construtor === Array && value.length === 0) || + (typeof value === 'object' && Object.keys(value).length === 0) + ); +}; +console.log(isEmpty('')); // true +console.log(isEmpty(' ')); // true +console.log(isEmpty('Asabeneh')); // false +console.log(isEmpty([])); // true +console.log(isEmpty(['HTML', 'CSS', 'JS'])); // false; +console.log(isEmpty({})); //true +console.log(isEmpty({ name: 'Asabeneh', age: 200 })); // false + +/* =============================== QUESTION 5 ================================================ + a. Create a function called reverse which take a parameter and it returns the reverse of the parameter. + Don't use the built in reverse method. + b. Create a function called isPalindrome which check if a parameter is a palindrome or not. + Use the function from a to reverse words. +============================================================================================ */ +//5a +const reverse = value => { + let reversed = ''; + if (typeof value === 'number') { + const formatedValue = value.toString(); + const len = formatedValue.length; + for (let i = len - 1; i >= 0; i--) { + reversed += formatedValue[i]; + } + } else if (typeof value === 'string') { + const formatedValue = value + .trim() + .replace(/\W/g, '') + .toLowerCase(); + let len = formatedValue.length; + for (let i = len - 1; i >= 0; i--) { + reversed += formatedValue[i]; + } + } else { + return 'Not a valid parameter'; + } + return reversed; +}; +console.log(reverse('car')); +console.log(reverse('Cat ')); +console.log(reverse('Tuna nut.')); +console.log(reverse('A nut for a jar of tuna.')); +// end of 5a + +//5b +const isPalindrome = value => { + let isPalindrome = false; + if (typeof value === 'number') { + const formatedValue = value.toString(); + if (reverse(formatedValue) === formatedValue) { + isPalindrome = true; + } + } else if (typeof value === 'string') { + const formatedValue = value + .trim() + .replace(/\W/g, '') + .toLowerCase(); + if (reverse(formatedValue) === formatedValue) { + isPalindrome = true; + } + } else { + return 'Not a valid parameter'; + } + return isPalindrome; +}; +console.log(isPalindrome('Anna')); //true +console.log(isPalindrome(121)); //true +console.log(isPalindrome('Noon')); //true +console.log(isPalindrome('Asa ')); //true +console.log(isPalindrome('Asab')); //false +console.log(isPalindrome('cat')); //false +console.log(isPalindrome('Tuna nut.')); // true +console.log(isPalindrome('A nut for a jar of tuna.')); // true +console.log(isPalindrome('A man, a plan, a canal. Panama')); +/* =============================== QUESTION 6 ============================================= + Create a function called countPalindrowWords which counts the number of palindrome words in + the palindoromeWords array or in any array. + =========================================================================================== */ +const words = [ + 'Anna', + 'Asa', + 'Civic', + 'common', + 'Kayak', + 'Level', + 'Madam', + 'Mom', + 'Noon ', + 'Rotor', + 'Sagas ', + 'Solar', + 'Stats', + 'Tenet ', + 'Wow' +]; + +const countPalindrowWords = arr => { + let count = 0; + for (const word of arr) { + if (isPalindrome(word)) { + count++; + } + } + return count; +}; +console.log(countPalindrowWords(words)); // 13 + +/* =============================== QUESTION 7 ============================================= + Count the number of palindrome words in the following sentence. + =========================================================================================== */ +const sentence = `He met his mom at noon and she was watching an epsoide of the begninging of her Solos. Her tenet helped her to level up her stats. After that he went to kayak driving Civic Honda.`; +const countPalindrowWords2 = sent => { + const words = sent.split(' '); + const palindromeWords = []; + let count = 0; + for (const word of words) { + if (isPalindrome(word)) { + count++; + palindromeWords.push(word); + } + } + return { count, words: palindromeWords }; +}; +console.log(countPalindrowWords2(sentence)); +//{count:8, words:["mom", "noon", "Solos.", "tenet", "level", "stats.", "kayak", "Civic"]} + +const users = [ + { + _id: 'ab12ex', + username: 'Alex', + email: 'alex@alex.com', + password: '123123', + createdAt: '17/05/2019 9:00 AM', + isLoggedIn: false + }, + { + _id: 'fg12cy', + username: 'Asab', + email: 'asab@asab.com', + password: '123456', + createdAt: '17/05/2019 9:30 AM', + isLoggedIn: true + }, + { + _id: 'zwf8md', + username: 'Brook', + email: 'brook@brook.com', + password: '123111', + createdAt: '17/05/2019 9:45 AM', + isLoggedIn: true + }, + { + _id: 'eefamr', + username: 'Martha', + email: 'martha@martha.com', + password: '123222', + createdAt: '17/05/2019 9:50 AM', + isLoggedIn: false + }, + { + _id: 'ghderc', + username: 'Thomas', + email: 'thomas@thomas.com', + password: '123333', + createdAt: '17/05/2019 10:00 AM', + isLoggedIn: false + } +]; + +const products = [ + { + _id: 'eedfcf', + name: 'mobile phone', + description: 'Huawei Honor', + price: 200, + ratings: [{ userId: 'fg12cy', rate: 5 }, { userId: 'zwf8md', rate: 4.5 }], + likes: [] + }, + { + _id: 'aegfal', + name: 'Laptop', + description: 'MacPro: System Darwin', + price: 2500, + ratings: [], + likes: ['fg12cy'] + }, + { + _id: 'hedfcg', + name: 'TV', + description: 'Smart TV:Procaster', + price: 400, + ratings: [{ userId: 'fg12cy', rate: 5 }], + likes: ['fg12cy'] + } +]; + +/* =============================== QUESTION 8 ============================================= + Imagine you are getting the above users collection from a MongoDB database. + a. Create a function called signUp which allows user to add to the collection. + If user exists, inform the user that he has already an account. + b. Create a function called signIn which allows user to sign in to the application + =========================================================================================== */ + +const randomId = () => { + const numbersLetters = '0123456789abcdefghijklmnopqrstuvwzyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split( + '' + ); + let randId = ''; + let randIndex; + for (let i = 0; i < 6; i++) { + randIndex = Math.floor(Math.random() * numbersLetters.length); + randId += numbersLetters[randIndex]; + } + return randId; +}; +const newUser = { + _id: randomId(), + username: 'Asabeneh', + email: 'asabeneh@asabeneh.com', + password: '123123123', + createdAt: new Date(), + isLoggedIn: false +}; +const signUp = () => { + const { email } = newUser; + for (const user of users) { + if (user['email'] == email) { + return 'An email has already exist. Please log in!'; + } + } + users.push(newUser); + return 'You have successfully signed up!'; +}; +console.log(users); +console.log(signUp(newUser)); +console.log(signUp(newUser)); +console.log(users); +const currentUser = { + email: 'asabeneh@asabeneh.com', + password: '123123123' +}; +const signIn = user => { + let found = false; + const { email, password } = user; + for (let i = 0; i < users.length; i++) { + if (users[i]['email'] === email && users[i]['password'] === password) { + users[i].isLoggedIn = true; + return 'Successfully logged in'; + } + } + if (!found) { + return 'Use does not exist'; + } +}; +console.log(signIn(currentUser)); +console.log(users); +console.log(signIn({ email: 'asab@asab.com', password: '123456' })); +/* =============================== QUESTION 9 ============================================= + The products array has three elements and each of them has six properties. + a. Create a function called rateProduct which rates the product + b. Create a function called averageRating which calculate the average rating of a product + =========================================================================================== */ +//a +const rateProduct = (productId, userId, ratingPoint) => { + let found = false; + for (let i = 0; i < products.length; i++) { + if (products[i]._id === productId) { + for (let j = 0; j < products[i].ratings.length; j++) { + if (products[i].ratings[j].userId === userId) { + const rate = { userId, rate: ratingPoint }; + products[i].ratings[j].rate = ratingPoint; + found = true; + break; + } + } + if (!found) { + products[i].ratings.push({ userId, rate: ratingPoint }); + } + } + } +}; +console.log(products); +rateProduct('eedfcf', 'fg12cy', 5); +rateProduct('aegfal', 'fg12cy', 2.5); +rateProduct('aegfal', 'fg12cy', 2.0); +console.log(products); +//b +const averageRating = productId => { + let sum = 0; + let len; // number of ratings + for (let i = 0; i < products.length; i++) { + if (products[i]._id === productId) { + len = products[i].ratings.length; + for (let j = 0; j < len; j++) { + if (len === 0) { + return 0; + } else { + sum += products[i].ratings[j].rate; + } + } + } + } + console.log(len); + return sum / len; +}; +console.log(averageRating('eedfcf')); + +/* =============================== QUESTION 10 ============================================= + Create a function called likeProduct. + This function will helps to like to the product if it is not liked and remove like if it was liked. + =========================================================================================== */ +const likeProduct = (productId, userId) => { + for (let i = 0; i < products.length; i++) { + if (products[i]._id === productId) { + const likes = products[i].likes; + const index = products[i].likes.indexOf(userId); + if (index !== -1) { + products[i].likes.splice(index, 1); + } else { + products[i].likes.push(userId); + } + } + } +}; +console.log(likeProduct('aegfal', 'fg12cy')); +console.log(likeProduct('eedfcf', 'fg12cy')); diff --git a/solutions/js-test-2020.html b/solutions/js-test-2020.html new file mode 100644 index 0000000..e89abea --- /dev/null +++ b/solutions/js-test-2020.html @@ -0,0 +1,15 @@ + + + + + + + +