Categories

Javascript30

What is Javascript30?

Javascript30 is a 30 day Javascript coding challenge made by Wes Bos.

You can accesss the learning material here: Javascript30

100DaysOfCode - Day 25 Booklist

I find this amazing youtube React tutorial-Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks and I make a super small project following his instruction.

This is my project: Day25_booklist and my code

100DaysOfCode - Day 24 Doggy Friends

I watch the videos of The Complete Web Developer in 2021: Zero to Mastery and make this React app step by step. I decide to make it a doggy friends app instead of robofriends, since dogs are cuter.

I find out React is not as hard as I thought last year. I get to learn a bit more and more...

100DaysOfCode - Day 23 Backgroundgenerator

Today I watch the videos of The Complete Web Developer in 2021: Zero to Mastery and I find this small project interesting. It’s as easy as the former ones I made.

This is my project: Day23_backgroundgenerator and my code.

const css = document.querySelector('h3'); const color1 = document.querySelector('.color1'); const color2 = document.querySelector('.color2'); const...

100DaysOfCode - Day 22 DOM

Lesson learned: learn the correct posture to code before coding.

My right has hurt for weeks. Luckily, it’s not my dominant hand, so it doesn’t bother me that much. However, I need both hands to code. I’ll try to rest more to see if it recovers. If not, I’ll need to go the doctor.

Today I review the concept...

100DaysOfCode - Day 21 House Sale Website

My parents in law need a website to sell their house, so I make this website based on the lightbox project.

This is my project: Day21_house_sale_website and my code

100DaysOfCode - Day 20 CSS Layout

Today I follow The Complete Web Developer in 2021: Zero to Mastery to use grid and flexbox to create a css website layout.

This is my project: Day20_css_layout and my code

100DaysOfCode - Day 19 Lightbox

I follow Simple Image Lightbox Tutorial to make this project.

I get to learn flexbox, grid and Animate.css.

This is my project: Day19_lightbox and my code

100DaysOfCode - Day 18 Startup Website

Judging by it’s name, I always think Bootstrp is difficult to learn and use. However, it turns out it’s easy! I have lots of fun making this website.

This is my project: Day18_startup_website and my code

100DaysOfCode - Day 16 Flexbox

Besides working on Day15 project, I start taking The Complete Web Developer in 2021: Zero to Mastery. My Day16 project would be CSS related: flexbox. I’m following the lesson tutorial to make a flexbox project.

I have basic CSS skills, but I’m lack of practice. This project help me to improve my knowledge of it.

This is my...

100DaysOfCode - Day 17 Robot

This project is easy and fun!

This is my project: Day17_robot and my code

My CSS:

h1 { text-align: center; font-family: 'Roboto', sans-serif; } .robots { flex-wrap: wrap; display: flex; justify-content: center; } .head, .left_arm, .torso, .right_arm, .left_leg, .right_leg { background-color: #7d5fe8; } .head { width: 200px; margin: 0 auto; height: 150px;...

100DaysOfCode - Day 15 Trivia Flashcards

This is my second React project. The first one is Day24 Doggy Friends.

This is my project: Day15_trivia_flashcards and my code

I follow How To Build A Flashcard Quiz With React to make this fun project.

As a person who barely knows anything about React, I find it quite difficult. In this project, I...

100DaysOfCode - Day 14 Grocery List

With the knowledge and experience I optain from Day12 project, I finish this project quickly.

This is my project: Day14_grocery_list and my code

However, I struggle for a while with the addItem. I finally realize when I want to deal with this function, I must select the form, not the <code class="language-plaintext...

100DaysOfCode - Day13 Cart

This project is based on Day12. In this project, I need to be able to add items into the shopping cart and cart information will update. Also, I will need to be able to delete item and clear all items.

This is my project: Day13_cart and my code

After I have all of these set up,...

100DaysOfCode - Day 12 Todolist

This project is difficult than I expected. I spend days writing it. This project uses the concept of localStorage. Though I learned about it in JS30, I need to refresh my memory. I watch that video on JS30 again and it helps me a lot.

I learn that it’s important to always review the things I write.

...

100DaysOfCode - Day 11 Tip Form

This project takes me this whole morning to finish.

This project isn’t useful in my daily life, since in Taiwan and Spain usually we are not obliged to pay tips.

In Taiwan, some places include the tips in bills, so we don’t need to worry about them. To be honest, our services in Taiwan are much better than many countries,...

100DaysOfCode - Day 10 Calculator

Today I had a job interview, I spent the whole day preparing for it. I did my best and it went very well. I still don’t have time to make up the project I missed.

This is my first to make a calculator. It is easier than I expected.

This is my project: Day10_calculator and my code

...

100DaysOfCode - Day 9 Modal JavaScript Project

Yesterday I was doing a Ruby test, so I didn’t have time for the project. Today I will try to make it up by doing 2.

This project is based on Day6 project, since it uses slider. I get a chance to learn the concept of lightbox. I watched a great video on youtube and learned so much about lightbox....

100DaysOfCode - Day 8 Filter Project

This project is a bit complicated for me, since I’m not familiar with HTMLElement.dataset. It took me a while to review the concept.

This is my project: Day8_filter_project and my code.

While I’m doing the project, I notice that if I press the button to filter the items, the page will go to the...

100DaysOfCode - Day 7 Testimonial Project

Today my hand doesn’t become better. I need to rest more. Today’s project is based on 2 projects I did before.

This is my project: Day7_testimonial_project and my code.

It’s doesn’t take me long to do the project. I deal with the customer’s reviews by making a nested array.

const customers =...

100DaysOfCode - Day 6 Background Image Slider

I hurt my right hand, so I will only do this project. Most of the time, I will let my right hand rest and heal.

This is my project: Day6_background_image_slider and my code.

This project is based on the knowledge of Day 5, yet I get to learn that displayPic.style.backgroundImage is used to set...

100DaysOfCode - Day 5 Counter Project

The weather is as good as yesterday, so I decide to do the laundry. While waiting for the washing machine to finish, I do this project.

This is my project: Day5_counter_project and my code.

At first, I find it easy, but somehow my code is not so elegent, since I deal with the two buttons separately....

100DaysOfCode - Day 4 Pass The Message Project

Today’s project challenges me to select the input element’s value from the DOM. It was fairly easy and I get to review how the form and ‘subbit’ work.

This is my project: Day4_pass_the_message_project and my code.

This is my first attempt. My code can’t work properly. The message I add only stays for a while and...

100DaysOfCode - Day 3 random quotes project

The weather is good today, yet I decide to stay home coding like always. During this COVID pandemic, I find “stay home and code” is a safer option.

Today I’m going to do random quotes project. Well, the knowledge is based on the former two practice, so it’s rather easy and fun!

This is my project: Day3_random_quotes_project and...

100DaysOfCode - Day 2 Hex Color Background Changer

In this project, I have to get random hex value created from an array of all the possible different hex values, loop through them, and concatenate 6 different values to a String that begun with the # character.

This is my project: Day2_hex_color_background_changer and my code.

Well, at first I misundertand the explanation and make this:

…

New Challenge - 100DaysOfCode

After finishing Javascript30, I’d like to challenge myself with more projects. Therefore, I’ll start with 100DaysOfCode. I will start today!

In this 100 day challenge, I’ll do a small project everyday based on 100+ JavaScript Projects for Beginners!

After I finish a project, I’ll write a blog to show my thoughts and codes.

In order to balance my...

100DaysOfCode - Day 1 Change Background Color

Today is the first day of my challenge. Yay!

I’ll start with Change Background Color.

This is my project: Day1_change_background_color and my code.

At first, I use queeySelector to select the body and button tags, which I’d alter.

const body = document.querySelector('body'); const button = document.querySelector('button'); 

Later, I add...

100DaysOfCode - Day 16 Flexbox

Besides working on Day15 project, I start taking The Complete Web Developer in 2021: Zero to Mastery. My Day16 project would be CSS related: flexbox. I’m following the lesson tutorial to make a flexbox project.

I have basic CSS skills, but I’m lack of practice. This project help me to improve my knowledge of it.

This is my...

100DaysOfCode - Day 17 Robot

This project is easy and fun!

This is my project: Day17_robot and my code

My CSS:

h1 { text-align: center; font-family: 'Roboto', sans-serif; } .robots { flex-wrap: wrap; display: flex; justify-content: center; } .head, .left_arm, .torso, .right_arm, .left_leg, .right_leg { background-color: #7d5fe8; } .head { width: 200px; margin: 0 auto; height: 150px;...

100DaysOfCode - Day 21 House Sale Website

My parents in law need a website to sell their house, so I make this website based on the lightbox project.

This is my project: Day21_house_sale_website and my code

100DaysOfCode - Day 20 CSS Layout

Today I follow The Complete Web Developer in 2021: Zero to Mastery to use grid and flexbox to create a css website layout.

This is my project: Day20_css_layout and my code