SheCodes JavaScript Cheatsheet

SheCodes JavaScript cheatsheet

About this website and SheCodes

This website was built using technologies taught in SheCodes Coding Workshops including HTML, CSS, JavaScript, React, GitHub, Bootstrap and APIs. SheCodes teaches coding skills to busy women 👩‍💻

Dark Theme

Snippets categories:All General Variables Alerts & Prompts If else Strings Arrays Dates Numbers Objects Functions Debugging Selectors Events AJAX Element manipulation APIs

Variables

Structure structure types

let students = ["Kate", "Julie", "Mariana"]; // Array

let kate = {
  firstName: "Kate",
  lastName: "Johnson",
  age: 23,
  canCode: true,
}; // Object

Alerts & Prompts

If else

if statement

let country = prompt("What country are you from?");

if (country === "Portugal") {
  alert("You are cool");
}

if (country !== "Portugal") {
  alert("Too bad for you");
}

Logical And

if (continent === "Europe" && language === "Portuguese") {
  alert("You are from Portugal 🇵🇹");
} else {
  alert("You are not from Portugal");
}

Strings

String concatenation

let firstName = "Julie";
let lastName = "Johnson";
let fullName = firstName + " " + lastName; // "Julie Johnson"

//or
let fullName = `${firstName} ${lastName}`;

Arrays

Dates

Get date data

let now = new Date();
now.getMinutes(); // 0,1,2, 12
now.getHours(); //1, 2, 3, 4
now.getDate(); //1, 2, 3, 4
now.getDay(); // 0, 1, 2
now.getMonth(); // 0, 1, 2
now.getFullYear(); // 2021

Numbers

Objects

Creating a new object

let fruit = new Object(); // "object constructor" syntax

let user = {}; // "object literal" syntax

let student = {
  firsName: "Julie",
  lastName: "Johnson",
};

let anotherStudent = {
  firstName: "Kate",
  lastName: "Robinson",
  female: true,
  greet: function () {
    alert("Hey");
  },
};

Reading an object properties

let user = {
  firstName: "Lady",
  lastName: "Gaga",
  gender: "female",
};

alert(user.firstName); // Lady
alert(user.lastName); // Gaga

// or
alert(user["firstName"]); // Lady
alert(user["lastName"]); // Gaga

Object Arrays

let users = [
  {
    firstName: "Bradley",
    lastName: "Cooper",
  },
  {
    firstName: "Lady",
    lastName: "Gaga",
  },
];

users.forEach(function (user, index) {
  for (let prop in user) {
    alert(prop + " is " + user[prop]);
  }
});

Enumerating the properties of an object

let user = {
  firstName: 'Lady',
  lastName: 'Gaga',
  gender: 'female'
}


for(let prop in user) {
  alert(prop); // firstName, lastName, gender
  alert(user[prop]); // 'Lady', 'Gaga', 'female'
}

Functions

JS Functions

function sayFact() {
  let name = prompt("What's your name?");

  if (name === "Sofia") {
    alert("Your name comes from the Greek -> Sophia");
  }
}

sayFact();

JS Functions Parameters

function fullName(firstName, lastName) {
  alert(firstName + " " + lastName);
}

let firstName = prompt("What's your first name?");
let lastName = prompt("What's your last name?");
fullName(firstName, lastName);
fullName("Kate", "Robinson");

JS Functions Return

function add(x, y) {
  return x + y;
}

let result = add(3, 4);
let result2 = add(result, 0);


function getFullName(firstName, lastName) {
  let fullName = firstName + " " + lastName;
  return fullName;
}

let userFullName = getFullName("Kate", "Robinson");
alert(userFullName); // Kate Robinson
alert(getFullName("Julie", "Smith")); // Julie Smith

Selectors

QuerySelector

let li = document.querySelector("li");
let day = document.querySelector(".day");
let paragraph = document.querySelector("ul#list p");

QuerySelectorAll

let lis = document.querySelectorAll("li");
let paragraphs = document.querySelectorAll("li#special p");

Events

Creating an event listener

function sayHi() {
  alert("hi");
}

let element = document.querySelector("#city");
element.addEventListener("click", sayHi);

AJAX

AJAX with Fetch

let root = 'https://jsonplaceholder.typicode.com'
let path = 'users/1'

fetch(root + '/' + path)
  .then(response => (
    response.json()
  ))
  .then(json => (
    console.log(json)
  ));

AJAX with Axios

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      function showUser(response) {
        alert(`The user name is ${response.data.name}`);
      }

      let url = "https://jsonplaceholder.typicode.com/users/1";
      axios.get(url).then(showUser);
    </script>
  </body>
</html>

Element manipulation

Forms

<form>
  <input type="text" id="email" />
</form>
<script>

function signUp(event) {
  event.preventDefault();
  let input = document.querySelector("#email");
  console.log(input.value);
}
let form = document.querySelector("form");
form.addEventListener("submit", signUp);
</script>

HTML Attributes Manipulation

let button = document.querySelector("input#button");
button.setAttribute("disabled", "disabled");

let email = document.querySelector("input#email");
email.removeAttribute("required");

CSS Styles

let boxElement = document.querySelector("#box");
boxElement.style.backgound = "red";
boxElement.style.padding = "10px 20px";
boxElement.style.marginRight = "10px";

APIs

Geolocation API

function handlePosition(position) {
  console.log(position.coords.latitude);
  console.log(position.coords.longitude);
}

navigator.geolocation.getCurrentPosition(handlePosition)

👩‍💻

What is SheCodes?

SheCodes teaches coding skills to busy women
Start your dream career in tech

Learn more about SheCodes

4.9/5, our workshops are highly recommended by
230,000+ women, including employees from these companies

📬

Join Our Mailing List

Be the first to know about upcoming coding workshops, new coding tools, and other SheCodes related news.