GithubHelp home page GithubHelp logo

atteroot / js_notification_dom Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mate-academy/js_notification_dom

0.0 0.0 0.0 217 KB

JS Advanced task. Create notification.

License: GNU General Public License v3.0

JavaScript 20.27% HTML 21.02% CSS 58.71%

js_notification_dom's Introduction

  1. Replace <your_account> with your Github username in the link
  2. Follow this instructions
    • There are no tests for this task so use npm run lint command instead of npm test

Task: Create a notification

To inform the user about the success of the operation, or any errors, websites usually use messages that appear for a while on the screen.

Your task: Create function pushNotification, which takes coords of future message, title, description and type (warning, success or error), appends it to the document and remove it after 2 seconds. You no need to write any styles or HTML code in this task. Change only main.js file.

Implementation tips:

  • The message is block element with class notification + class which depends on the input parameter type (success, error, warning).
  • The message should have a title with class title (prefer h2 element)
  • The message should have description (prefer tag p)
  • Set coordinates of the message (top and right) rely on values from parameters.

Hint: use setTimeout for execute a function or specified piece of code once the timer expires.

It's an expected result of your job: Result

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.