/web_project_4

Project 4-9: Around The U.S.

Primary LanguageJavaScript

Project 4-9: Around The U.S.

Overview

  • Intro
  • Languages and Technologies have been used
  • Figma
  • Images
  • New Features
  • Possible Improvements
  • Deployed Project

Intro

This is the forth project at Practicum by Yandex and Evolving through further sprints. It's an responsive landing page that showcases a person's travel around the U.S. This project use Javascript to add funcionality for elements. All elements are designed to be displayed correctly on the popular screen size (1280px, 320px) and between them.

Languages and Technologies

  • HTML5
  • CSS3
  • Responsive Layout
  • JavaScript
  • Form Validation
  • OOP (Object-Oriented-Programming)
  • Modular Javascript
  • DOM Manipulation
  • Flexbox, Grids and forms
  • BEM File Structure
  • Animation
  • Working from a Figma Brief
  • Webpack, babel, postcss
  • Npm
  • Node.js
  • Asynchronous Programming
  • API's Requests

Continued Development

Figma

Images

New Features

  • Added funcionality to the add button if the user wants to add new place.
  • Made the like button function.
  • Added the option to remove places.
  • Picture popup for images.
  • Form Validation and resets after submitting.
  • Closing popup windows from overlay, or with the Escape key.
  • Refactor and Separate JS code into modules using OOP.
  • Using Webpack for separate JS code into Modules to minify the code.
  • Class Destructing.
  • API's request calls for necessary actions.
  • Like Button counter.
  • Update profile image pop window with link inside.
  • Popup window to check if the user is sure to remove postcard.
  • Add and Remove likes.
  • All forms UX improvement.

Possible Improvements

  • Optimize the website for Disabled Users.
  • Optimize the page speed and adding security.
  • Additional animations.
  • Option to select postcards group to remove together.
  • Import/export postcards.
  • Work with the server so the information can be saved.
  • Using Backend to store the forms contact changes.
  • User Registration.

Deployed Project