Skip to content

Instantly share code, notes, and snippets.

View akirap3's full-sized avatar

akirapf3 akirap3

View GitHub Profile

Introduction to the Functional Programming Challenges

  • Functional programming is an approach to software development based around the evaluation of functions. Like mathematics, functions in programming map input to output to produce a result. You can combine basic functions in many ways to build more and more complex programs.
  • Functional programming follows a few core principles:
    • Functions are independent from the state of the program or global variables. They only depend on the arguments passed into them to make a calculation
    • Functions try to limit any changes to the state of the program and avoid changes to the global objects holding data
    • Functions have minimal side effects in the program
  • The functional programming software development approach breaks a program into small, testable parts.

Functional Programming: Learn About Functional Programming

Intermediate Algorithm Scripting: Sum All Numbers in a Range

Practice:

  • You need to create a program that will take an array of two numbers who are not necessarily in order, and then add not just those numbers but any numbers in between. For example, [3,1] will be the same as 1+2+3 and not just 3+1

My Solution:

function sumAll(arr) {

JavaScript Algorithms and Data Structures Projects: Palindrome Checker

  • A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
  • Note: You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.
    • palindrome("eye") should return true.
    • palindrome("race car") should return true.
    • palindrome("My age is 0, 0 si ega ym.") should return true.
    • palindrome("0_0 (: /-\ :) 0-0") should return true.
    • palindrome("five|_/|four") should return false.

Bootstrap: Use Responsive Design with Bootstrap Fluid Containers

With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.

You can add Bootstrap to any app by adding the following code to the top of your HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

Introduction to jQuery

  • jQuery is one of the many libraries for JavaScript. It is designed to simplify scripting done on the client side. jQuery's most recognizable characteristic is its dollar sign ($) syntax. With it, you can easily manipulate elements, create animations and handle input events.

jQuery: Learn How Script Tags and Document Ready Work

  • First, add a script element at the top of your page. Be sure to close it on the following line.

  • Your browser will run any JavaScript inside a script element, including jQuery.

Introduction to the Sass Challenges

  • Sass, or "Syntactically Awesome StyleSheets", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects.

  • Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code.

  • There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout these challenges, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .scss extension.

  • The second and older syntax, known as the indented syntax (or sometimes just "Sass"), uses indentation rather than brackets to indicate nes

Introduction to the React Challenges

  • React, created by Facebook, is an open-source JavaScript library for building user interfaces. It is used to create components, handle state and props, utilize event listeners and certain life cycle methods to update data as it changes.



  • React combines HTML with JavaScript functionality to create its own markup language, JSX.


Introduction to the Redux Challenges

  • Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. While you can use Redux with any view library, it's introduced here before being combined with React.


Redux: Create a Redux Store

  • Redux is a state management framework that can be used with a number of different web technologies, including React.

Introduction to the React and Redux Challenges

  • In a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates.

React and Redux: Getting Started with React Redux

  • This series of challenges introduces how to use Redux with React. First, here's a review of some of the key principles of each technology. React is a view library that you provide with data, then it renders the view in an efficient, predictable way. Redux is a state management framework that you can use to simplify the management of your application's state. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly fro

Introduction to the Data Visualization with D3

  • D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG).

  • D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization.



Add Document Elements with D3