4Geeks logo
About us

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

← Back to Projects

Code an Excuse Generator in Javascript

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Click to open

Live demo

Not available

Average duration

4 hrs

Technologies

Disneyland for procrastinators and lazy people.

This project is ideal for avoiding someone annoying, it takes no more than 20 lines of code, and it can save you for the rest of your life!

The Goal

We wanted a project that uses very little JavaScript but still with a very fun application. The excuse generator takes 20 lines of code, is super simple to understand and is the perfect first project for any beginner developer.

πŸ“ Instructions:

Please create a small website that generates an excuse each time a button is pressed, it has to look like this: Checkout the demo animation.

Discuss with your classmates the strategy first

How can we generate an excuse? How are sentences built?

Excuse generator explanation

The idea is to generate each part of the sentence randomly to come up with great excuses!

🌱 How to start this project

Do not clone this repository because we are going to be using a different template.

We recommend opening the vanillajs-hello template using a provisioning tool like Codespaces (recommended) or Gitpod. Alternatively, you can clone it on your local computer using the git clone command.

This is the repository you need to open or clone:

1https://github.com/4GeeksAcademy/vanillajs-hello

πŸ‘‰ Please follow these steps on how to start a coding project.

πŸ’‘ Hints:

  1. Update your index.html with one excuse hard-coded, no JS, just one excuse in pure plain HTML.
  2. The excuse must be inside an HTML tag that has an id assigned, for example:
1 <p id="excuse">My dog ate my homework</p>
  1. Using JavaScript, create a function that generates and returns a random excuse with the following structure:
1let who = ['The dog', 'My grandma', 'His turtle', 'My bird']; 2let action = ['ate', 'peed', 'crushed', 'broke']; 3let what = ['my homework', 'the keys', 'the car']; 4let when = ['before the class', 'right on time', 'when I finished', 'during my lunch', 'while I was praying'];
  1. To create a consistent excuse, you have to concatenate one item from each array in the proper order.
  2. Call the function onload and set the excuse into the innerHTML of the #excuse HTML element.

Technologies

HTML, CSS3, JavaScript, Webpack.

Fundamentals

This exercise covers the following fundamentals:

  1. Using external Javascript files in your project.
  2. How to work with Arrays.
  3. Generating random numbers.
  4. Concatenating strings.
  5. Using functions (at least a bit).
  6. Working with events (at least a bit).

This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Live demo

Not available

Average duration

4 hrs