diff --git a/README.md b/README.md new file mode 100644 index 0000000..b0ae281 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# react-api-meaning +this repository contains a JSON file containing the uses of various React event references. +It was submitted as an assignment during my time as a front-end development trainee under the Ekiti State Digital Skill Academy (EDSA) facilitated by Tech4dev and supported by Meta. diff --git a/assigment.json b/assigment.json index 39a9251..2b542be 100644 --- a/assigment.json +++ b/assigment.json @@ -1,16 +1,125 @@ [ { - "Clipboard": { - "onCopy": "lorenm loraem lorem", - "onCut": "lorem lorem lorem", - "onPaste": "lorem lorem lorem" + "CLIPBOARD": { + "onCopy": "It occurs when the user starts a copy process in the browser.", + "onPaste": "It occurs when the user pastes some content in an element.", + "onCut": "It occurs when the user cuts the content of an element." } }, { - "Composition":{ - "onCompositionEnd": "lorem lorem lorem", - "onCompositionStart": "lorem lorem lorem", - "onCompositionUpdate": "lorem lorem lorem" + "COMPOSITION": { + "onCompositionEnd": "The compositionend event is fired when a text composition system such as an input method editor completes or cancels the current composition session. ", + "onCompositionStart": "The compositionstart event is fired when a text composition system such as an input method editor starts a new composition session.", + "onCompositionUpdate": "The compositionupdate event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor." + } + }, + { + "KEYBOARD": { + "onKeyDown": "fires when the user is pressing the down key (on the keyboard).", + "onKeyPress": "it fires occurs when the user presses a key on the keyboard but it is not fired for all keys e.g. ALT, CTRL, SHIFT", + "onKeyUp": "occurs when the user is pressing the up direction key (on the keyboard)." + } + }, + { + "FOCUS": { + "onFocus": "is called when the element (or some element inside of it) receives or acquires focus. Like clicking on a text:input box.", + "onBlur": "occurs when the user gets out of focus from a field" + } + }, + { + "FORM": { + "onChange": "this event detects when the value of an input element changes.", + "onInput": "is fired when the value of an input changes not when an element changes.", + "onSubmit": "is the event handler attached to the form submission, so it triggers when the form is submitted." + } + }, + { + "MOUSE": { + "onClick": "this event allows the calling of a function when an element is clicked.", + "onContextMenu": "this event occurs when the user right-clicks an element to open the context menu. ", + "onDoubleClick": "occursevent occurs when the user double-clicks an element.", + "onDrag": "this event, onDrag fires whenever a React component is being dragged.", + "onDragEnd": "occurs when a user has finished dragging a selection", + "onDragEnter": "occurs when a draggable selection enters a drop target.", + "onDragExit": "is triggered when the the user leaves the dragged selection", + "onDragLeave": "occurs when a draggable selection leaves a drop target.", + "onDragOver": "this event occurs when a draggable selection is dragged over a target.", + "onDragStart": "The event occurs when the user starts to drag a selection.", + "onDrop": "the event triggers immediately the dragged content is released on the element that contains the ondragover event listener.", + "onMouseDown": "occurs when a user presses a mouse button over an element.", + "onMouseEnter": "occurs when the mouse pointer enters an element.", + "onMouseLeave": "occurs when the mouse pointer leaves an element.", + "onMouseMove": "is an event handler that gets triggered whenever we move the mouse over the element.", + "onMouseOut": "this event occurs when the mouse pointer moves out of an element.", + "onMouseOver": "The event occurs when the mouse pointer is moved onto an element", + "onMouseUp": "occurs when a mouse button is released over an element." + } + }, + { + "SELECTION": { + "onSelect": "occurs after some text has been selected in an element." + } + }, + { + "TOUCH": { + "onTouchCancel": "The event occurs when a touch event is interrupted. The touchcancel event only works on touch screens.", + "onTouchEnd": "this event occurs when a user removes the finger(touch) from an element. ", + "onTouchMove": "this event occurs when a user moves the finger(touch) across the screen. ", + "onTouchStart": "the tevent occurs when a user touches an element." + } + }, + { + "UI": { + "onScroll": "this event occurs when an element's scrollbar is being scrolled. " + } + }, + { + "MOUSE WHEEL": { + "onWheel": "occurs when the mouse wheel is rolled over an element." + } + }, + { + "MEDIA": { + "onAbort": "occurs when the loading of an audio or video is aborted.", + "onCanPlay": "occurs when the browser can start playing a media. The oncanplay event occurs when the browser has buffered enough to begin.", + "onCanPlayThrough": "occurs when the browser estimates it can play through a media without having to stop for buffering.", + "onDurationChange": "The ondurationchange event occurs when the duration of a media is changed. When an audio or video is loaded, the duration changes from 'NaN' to an actual duration.", + "onEmptied": "occurs when the an audio or video is empty. The onemptied is not sent when a media has finished loading.", + "onEncrypted": "the event is fired when the media encounters some initialization data indicating it is encrypted.", + "onEnded": "The event occurs when an audio/video has reached the end.", + "onError": "The event is triggered if an error occurs while loading an external file (e.g. a document or an image).", + "onLoadedData": "occurs when a media frame is loaded, but does not guarantee that enough data is available to begin playing.", + "onLoadedMetadata": "this event occurs when meta data for a media has been loaded.", + "onLoadStart": "occurs when the browser starts the loading process of an audio or video.", + "onPause": "occurs when an audio/video is paused. The onpause event also occurs when an audio/video has reached the end.", + "onPlay": "this event occurs when an audio/video is started.", + "onPlaying": "occurs when an audio/video starts playing. The onplaying event also occurs when an audio/video resumes after beeing paused or buffered.", + "onProgress": "occurs when the browser is downloading an audio or video.", + "onRateChange": "occurs when the playing speed of a media is changed (like when a user switches to a slow motion or fast forward mode).", + "onSeeked": "this event occurs when a user has seeked a new position in a media.", + "onStalled": "is fired when the browser is trying to get media data that is not available.", + "onSuspend": "it occurs when the browser is not getting media data. The onsuspend event occurs when the loading is prevented or suspended. ", + "onTimeUpdate": "occurs when the user moves the play position.", + "onVolumeChange": "the event occurs when a media volume is changed. The onvolumechange event occurs when the volume is increased og decreased.", + "onWaiting": "it occurs when a media must wait for the next frame." + } + }, + { + "IMAGE": { + "onError": "This event handler triggers when an error manifests while the image is loading.", + "onLoad": "is triggered when an the image has been loaded." + } + }, + { + "ANIMATION": { + "onAnimationStart": "This event triggers the moment the animation started, ususally a CSS animation", + "onAnimationEnd": "The event is fired when a CSS Animation has completed", + "onAnimationIteration": "The event is triggeres when a CSS animation is repeated." + } + }, + { + "TRANSITION": { + "onTransitionEnd": "is fired when the transition ends. When the transition includes more than one parameter the handleTransitionEnd function will be executed as many times as the number of parameters." } } ] \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..76e5cd7 --- /dev/null +++ b/index.js @@ -0,0 +1,59 @@ +const express = require('express'); +const cors = require('cors'); + + + +const app = express(); +const port = 3000; + +app.use(cors()); +app.use(express.json()); + +const users = []; + + +app.get("/api/users", (req, res) => { + res.json(users); +}); + +app.post("/api/register", (req, res) => { + const { username, password } = req.body; + + const existingUser = users.find((user) => user.username === username); + if (existingUser) { + res.status(400).json({ message: "User already exists" }); + } + + const newUser = { + username, + password, + }; + + users.push(newUser); + + res.status(201).json({ message: "User created" }); +}); + + +app.post("/api/login", (req, res) => { + const { username, password } = req.body; + + const user = users.find((user) => user.username === username); + if (!user) { + return res.status(400).json({ message: "User not found" }); + } + + if (user.password !== password) { + return res.status(400).json({ message: "Invalid credentials" }); + } + + res.status(200).json({ message: "Login successful" }); +}); + + + + +app.listen(port, () => { + console.log(`Server listening on port ${port}`); +}); +