Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
My update process is working. However, it only take effect on the top row of the table. When I tried to update the 2nd row and so on, it only gets the value of the first row and no changes happen.
I already tried to get the Id. But when trying to update the 2nd row and so on, it does not take effect.
I am using autocomplete component from vuetify 2
My application is returning an array of full names, like:
[‘André Ramalho Rodrigues’, ‘Joaquim de Almeida’, ‘Filipe Joaquim Almeida’]
The autocomplete works as expceted but, if I try to search:
It only appears the name “Filipe Joaquim Almeida” and I want that the application shows both names that have that two words:
Is there a way to change the autocomplete component or do I need to program one component that does that for me?
<v-autocomplete
:items="items"
:item-text="item=>item.full_name"
item-value="id"
>
</v-autocomplete>
I have React context where i hold information about logged user:
import React, { createContext, Dispatch, SetStateAction, useEffect, useState } from "react";
interface User {
name?: string;
email?: string;
rating?: number;
}
interface LoggedUserInterface {
isAuthenticated: boolean;
user: User;
}
interface IAuthContext extends LoggedUserInterface {
setLoggedUser: Dispatch<SetStateAction<IAuthContext>>;
}
type Props = {
children?: React.ReactNode;
};
// Default value for IAuthContext
const defaultAuthContextValue: IAuthContext = {
isAuthenticated: false,
user: {
name: undefined,
email: undefined,
rating: undefined,
},
setLoggedUser: () => {}, // You might want to provide a default implementation
};
const AuthContext = createContext<IAuthContext>(defaultAuthContextValue);
const AuthProvider: React.FC<Props> = ({ children }) => {
const [loggedUser, setLoggedUser] = useState<IAuthContext>(defaultAuthContextValue);
useEffect(() => {
async function getWhoAmI() {
try {
const response = await fetch("http://localhost:8080/api/v1/profile/status", {
method: "GET",
credentials: "include",
});
if (response.ok) {
const data = await response.json();
setLoggedUser((prev) => ({ ...prev, isAuthenticated: data.isAuthenticated, user: data }));
} else {
setLoggedUser((prev) => ({ ...prev, isAuthenticated: false, user: {} }));
console.error("Error checking authentication status:", response.statusText);
}
} catch (error: any) {
setLoggedUser((prev) => ({ ...prev, isAuthenticated: false, user: {} }));
console.error("Error checking authentication status:", error.message);
}
}
getWhoAmI();
}, []);
return (
<AuthContext.Provider value={{ ...loggedUser, setLoggedUser }}>
{children}
</AuthContext.Provider>
);
};
export { AuthContext, AuthProvider };
And i have login page, i want to prevent alreadt logged user to navigate to /login.
import React, {useContext, useEffect, useState} from 'react';
import {Button, Paper, TextField, Typography} from '@mui/material';
import {useNavigate} from 'react-router-dom';
import './Login.css';
import {AuthContext} from "../context/AuthContext";
const Login: React.FC = () => {
const [formData, setFormData] = useState({
email: '',
password: '',
});
const navigate = useNavigate();
const authContext = useContext(AuthContext);
const {setLoggedUser} = authContext;
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const {name, value} = event.target;
setFormData((prevFormData) => ({
...prevFormData,
[name]: value,
}));
};
const loginUser = async () => {
const endpoint = 'http://localhost:8080/api/v1/auth/login';
try {
const response = await fetch(endpoint, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (response.ok) {
const data = await response.json();
setLoggedUser({
...authContext,
isAuthenticated: true,
user: {
name: data.name,
email: data.email,
rating: data.rating,
},
});
// Redirect to the desired page upon successful login
navigate('/');
} else {
const errorData = await response.json();
console.error('Login failed:', errorData.message);
}
} catch (error: any) {
console.error('Error during login:', error.message);
console.log(error);
}
};
const handleSubmit = () => {
loginUser();
};
return (
<>
<div id="login-wrapper">
<Paper elevation={3} id="login-container">
<Typography variant="h2" align="center" gutterBottom>
Login
</Typography>
<form style={{display: 'flex', flexDirection: 'column', gap: '16px', width: '100%'}}>
<TextField label="Email" type="email" variant="outlined" onChange={handleInputChange}
name="email"/>
<TextField label="Password" type="password" variant="outlined" onChange={handleInputChange}
name="password"/>
<Button variant="contained" color="primary" onClick={handleSubmit}>
Login
</Button>
</form>
</Paper>
</div>
</>
);
};
export default Login;
For that, i am using private route:
import React, { ReactNode } from "react";
import { Navigate, Outlet } from "react-router-dom";
interface ProtectedRouteProps {
isAllowed: boolean;
redirectTo?: string;
children?: ReactNode;
}
export default function ProtectedRoute({ isAllowed, redirectTo = "/", children }: ProtectedRouteProps) {
console.log("LOGGED IS " + isAllowed)
if (isAllowed) {
return <Navigate to={redirectTo} />;
}
return children ? <>{children}</> : <Outlet />;
}
Using it like:
function App() {
const authContext = useContext(AuthContext);
return (
<div className="container">
<AuthProvider>
<Header/>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/register" element={<Register/>}/>
<Route path="/login" element={
<ProtectedRoute isAllowed={authContext.isAuthenticated} redirectTo='/'>
<Login/>
</ProtectedRoute>}
/>
<Route path="/howto" element={<HowTo/>}/>
</Routes>
<Footer/>
</AuthProvider>
</div>
);
}
When i login in login page, it redirects me to “/” page, however when i try to acces /login from url, it does not redirect me back to “/” as it should ( since user is already logged in ), i tried to check the condition but the authContext.isAuthenticated is always false when i try to acces login page with url /login.
Why is that? I have header where i display value based on if user is logged or not, and it works correctly. So the context should not change. So why is it false ?
Thanks for help!
I have an SVG image with embedded javascript that makes the image change based on onclick events:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
<script type="text/ecmascript">
<![CDATA[
function click() {
var el = document.getElementById("box");
el.setAttribute("style", "fill: red");
}
]]>
</script>
<rect style="fill: white" height="100" x="0" y="0" width="100" onclick="click()" id="box" />
</svg>
I would like to display this SVG image in a Jupyter notebook and maintain the interactive functionality.
I tried using
from IPython.display import SVG, display
display(SVG('interactive.svg'))
And while this displays the svg file, the image does not change from white to red when clicked on.
I am using the Axios Library, to add some dynamically loaded html in my page. The call is like this:
axios.get('get_info.php?priceTarget=' + ss.value.trim()).then(function (response) {
var d = response.data;
h = "<br/><br/>" + d;
document.getElementById("prices").innerHTML = document.getElementById("prices").innerHTML + h;
});
This works. I get:
<br><br><script type="text/javascript">
val1=20;
val2=10;
val3=200;
val4=380;
val5=480;
val6=550;
val7=900;
</script>
<form>
<div style="display:flex; flex-direction: row;">
<div style="display:flex; flex-direction: column; width:50%">
<div style="display:flex;flex-direction:row;width:100%;">
<input type="checkbox" id="hr" style=" border: none;
height: 24px;
width : 48px;
margin-bottom: 25px;
padding-left: 25px;
background-color: #ffffff;
outline: none;
color: #737272;
-webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.2);" onchange="showHour();">
<label for="hr" id="l_hr" style="width:32%;">
por HORA
</label>
</div>
<div style="display:flex;flex-direction:row;width:100%;">
<input type="checkbox" id="qm" style=" border: none;
height: 24px;
width : 48px;
margin-bottom: 25px;
padding-left: 25px;
background-color: #ffffff;
outline: none;
color: #737272;
-webkit-box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.2);" onchange="showQM();">
<label for="qm" id="l_qm" style="width:32%;">
por QM
</label>
</div>
</div>
<div style="display:flex; flex-direction: column;">
<input type="range" list="tickmarks" id="mv" onchange="showMV();">
<datalist id="tickmarks">
<option value="20">
</option><option value="40">
</option><option value="50">
</option><option value="60">
</option><option value="100">
</option></datalist>
<label for="mv" id="l_mv">
o seleccione tamaño: <span id="sval"> 50 </span> QM
</label>
</div>
</div>
<div style="font-size: 45px ; color: #D24545;" id="prc">
</div>
</form>
<script type="text/javascript">
function showHour() {
document.getElementById("prc").innerHTML = val1;
}
</script>
So, the PHP sends some html + javascript, which is then injected as the inner HTML of an element. This javascript has some functions defined into it.
Notice, that there is an eventlistner, which calls the showHour() function. The definition of showHour function is also injected. But when that event fires, i get the error message:
Uncaught ReferenceError: showHour is not defined
How can I resolve this issue? this is happening on FireFox and Chromium.
I looked at StackOverflow, but could not find a suitable answer. Thank you.
I have defined an object in javascript which represents an asp.net server control.
The server control defines a client callback method that basically retrieves the data that needs to be displayed in the control.
The controls life cycle is as follows:
The control is created on the server for the aspx page
The Pre-Render function attaches a client script to create the javascript control on window.load
The client script initializes the object and attempts to retrieve the data
once the data is received, the object displays its data
The problem I am facing is that when I add more then one of these custom controls, the callback for the data is only ever being executed for the last control added.
Example:
Control1 is created on the aspx page;
Control1 initializes, calls the function to get data
Control2 is created;
Control2 initializes, calls the function to get data
Control2 receives its data
Uniquely specific callback function names and settings timeouts dont work
I have a Vega scatterplot with dynamic data and axis labels. I have no problem with formatting the axes to dollars or rounding to various levels, but I simply cannot get percentages to work, despite using the same d3-format specifiers in other areas of the code (where they work).
This:
{
name: "XType",
value: ".0%",
bind: {
element: "#xAxisFormat1",
event: "change",
},
},formats as “0.1”, “0.2”, etc. despite formatting properly in the tooltips as “34%”, “35%”, etc.
While this:
{
name: "YType", // changes the data format of the Y-axis
value: "$,.2s",
bind: {
element: "#yAxisFormat1",
event: "change",
},
},formats as I want, like $3.0k” $4.0k” etc.
I am not sure why all of the others are working but the percentage option isn’t. I am pulling it directly from the d3 examples documentation.
I am trying to make an application with golang. I am serving my files to create a page where I can use Go as the back end and JavaScript as the front end.
file structure looks like this:
project-root
|-- server
| |-- main.go
|-- src
| |-- public
| |-- index.html
| |-- app.js
| |-- style.css
My main.go file:
func main() {
http.Handle("/", http.FileServer(http.Dir("src/public/")))
log.Fatal(http.ListenAndServe(port, nil))
}
My app.js:
const url = "http://localhost:3000"
const Email = () => {
return document.getElementById("Email").value;
};
const Password = () => {
return document.getElementById("Password").value;
};
document.querySelector("button").addEventListener("click", (e) => {
e.preventDefault();
fetch(url,{
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: Email(),
password: Password(),
}),
})
.then((response) => console.log(response.json()));
});
My index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UserAuth</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<form>
<h1>USER AUTH</h1>
<h2>email</h2>
<input id="Email" type="email" required>
<h2>password</h2>
<input id='Password' type="password" required>
<button type='submit'>Sign up</button>
</form>
<div class='hello'></div>
<div id='server'>
<h3 id='server-text'></h3>
</div>
</body>
<script src="./app.js"></script>
</html>
It seems that the Index.html file and Styles.css work just fine. However when I go to the console my app.js is the same as index.html.
I am attempting to use javascript so when my h1 element gets to the end of a line if it contains a hyphened word it line breaks the whole word onto the next line so it stops the below.
Issue below
i want the result to be
Product T Hydra 2000
e-Ticket
This is the javascript I have so far which pushes it onto the next line but this happens for every hyphened word regardless of where it sits within the h1.
let infoBox = document.querySelector('.viewer__info-box');
let h1Element = document.querySelector('.viewer__h1');
let words = h1Element.innerText.split(' ');
for (var i = 0; i < words.length; i++) {
if (words[i].includes('-')) {
words[i] = '<br>' + words[i];
}
}
console.log(words.join(' '));
h1Element.innerHTML = words.join(' ');I’ve tried using below to check the width of the div against the content but had no luck.
if (h1Element.scrollWidth <= h1Element.clientWidth) {
has anyone got any ideas on this?
I am trying to rotate an image drawn onto an HTML canvas element on a map, around the centre point of a masked area.
The image extent is defined by [minX, minY, maxX, maxY].
The masked area can be resized to any size within the extent of the image.
The position of the image on the canvas is first calculated:
// width / height of image from points (x/y coordinates)
c = imageExtent[2] - imageExtent[0];
d = imageExtent[3] - imageExtent[1];
// converted to canvas units
const scaledWidth = c / resolution * pixelRatio;
const scaledHeight = d / resolution * pixelRatio;
// offset of image extent from canvas extent for positioning image in centre
const x1 = (imageExtent[0] - canvasExtent[0]) / resolution * pixelRatio;
const y1 = (canvasExtent[3] - imageExtent[3]) / resolution * pixelRatio;
The image can then be drawn in the centre of the canvas and rotated:
ctx.translate(offsetX + scaleX / 2, offsetY + scaleY / 2);
// Rotate around this point
ctx.rotate(angle);
// Draw the image centered on this point
ctx.drawImage(image, -scaledWidth / 2, -scaledHeight / 2, scaledWidth , scaledHeight);
When the masked area is added, the centre point of this area becomes the point of rotation and the following code is used to draw and rotate the image.
// Calculate the center of the maskExtent
const maskCenterX = (maskExtent[0] + maskExtent[2]) / 2;
const maskCenterY = (maskExtent[1] + maskExtent[3]) / 2;
// Calculate the distance from the imageExtent corner to the mask center
const distToMaskCenterX = maskCenterX -imageExtent[0];
const distToMaskCenterY = imageExtent[3] - maskCenterY;
// Convert these distances to canvas pixels
const canvasDistX = distToMaskCenterX / resolution * pixelRatio;
const canvasDistY = distToMaskCenterY / resolution * pixelRatio;
// Translate to the center of the crop extent (considering the original offset)
ctx.translate(x1 + canvasDistX, y1 + canvasDistY);
// Rotate around this point
ctx.rotate(rotate);
// Draw the image such that the crop center is the rotation pivot
ctx.drawImage(image, -canvasDistX, -canvasDistY, scaledWidth , scaledHeight);
The problem comes about when the image is being masked from an already rotated position.
When the masked area is calculated, an extent in the same form as the image extent is retrieved.
The image is currently shifting when drawing based on the above calculations.
How can I ensure the image is drawn and rotated around the expected positions e.g. as shown below?
when submit the data for adding new user'(إضافة موظف)’ show me route not defined i using modal for submit the data expect after press submit to save the data for the new user and route i see doesnot have any error why he can not define it ?
HomeController
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppModelsUser;
use AppModelsUserDetail;
use IlluminateFoundationAuthAuthenticatesUsers;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* @return IlluminateContractsSupportRenderable
*/
public function index()
{
if(auth()->user()->is_admin==1)
{
$id =auth()->user()->id;
$userDataa=UserDetail::where('id',$id)->get();
return redirect()->route('admin.home');
}else{
$id =auth()->user()->id;
$userDataa=UserDetail::where('user_id',$id)->get();
return view('home',compact('userDataa'));
//return redirect()->route('home')->with('userDataa',$userDataa);
}
// return view('home');
}
public function store(Request $request)
{
/* $validator= $request->validate([
'name'=>'required|unique:users,name,',
'email'=>'required|unique:users,email,'
],
[
'name.required'=>' رجاء كتابة إسم للمستخدم',
'name.unique'=>'الإسم مكرر - رجاء إختيار إسم جديد',
'email.required'=>' رجاء كتابة إيميل للمستخدم',
'email.unique'=>' الإيميل مكرر رجاء كتابة إيميل جديد',
]);
return $validator;*/
$data= User::create([
'name'=>$request->name,
'email '=>$request->email ,
'password'=>$request->password,
'is_admin'=>$request->is_admin
]);
return $data;
// session()->flash('add','تم إضافة اليوزر بنجاح');
// return redirect()->back();
}
public function adminhome()
{
$allUsers=User::all();
return view('adminhome',compact('allUsers'));
}
public function update(Request $request)
{
$id = $request->id;
$request->validate([
'name'=>'required|unique:users,name,'.$id,
'email'=>'required|unique:users,email,'.$id
],
[
'name.required'=>' رجاء كتابة إسم للمستخدم',
'name.unique'=>'الإسم مكرر - رجاء إختيار إسم جديد',
'email.required'=>' رجاء كتابة إيميل للمستخدم',
]);
$data=User::findOrFail($request->id);
$data->update([
'name'=>$request->name,
'email'=>$request->email,
'is_admin'=>$request->drop_permision
]);
session()->flash('update','تم تعديل المستخدم بنجاح ');
return redirect('/admin/home');
}
public function destroy(Request $request)
{
$id= $request->id;
User::find($id)->delete();
session()->flash('delete','تم حذف المستخدم بنجاح');
return redirect('/admin/home');
}
public function user_details($id)
{
$user_rec=UserDetail::where('user_id',$id)->get();
// $user_id =UserDetail::where('user_id',$id)->value('user_id');
$user_id=$id;
return view('qa_records',compact('user_rec','user_id'));
}
}
adminhome.blade.php
'''@extends('layouts.master')
@section('css')
<link href="{{URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" />
<link href="{{URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" />
<link href="{{URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css')}}" rel="stylesheet">
<link href="{{URL::asset('assets/plugins/select2/css/select2.min.css')}}" rel="stylesheet">
<!---Internal Owl Carousel css-->
<link href="{{URL::asset('assets/plugins/owl-carousel/owl.carousel.css')}}" rel="stylesheet">
<!---Internal Multislider css-->
<link href="{{URL::asset('assets/plugins/multislider/multislider.css')}}" rel="stylesheet">
<!--- Select2 css -->
<link href="{{URL::asset('assets/plugins/select2/css/select2.min.css')}}" rel="stylesheet">
@endsection
@section('page-header')
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
<div class="my-auto">
<div class="d-flex">
<h4 class="content-title mb-0 my-auto">قائمة الموظفين</h4><span class="text-muted mt-1 tx-13 mr-2 mb-0">/
الكواليتى</span>
</div>
</div>
</div>
<!-- breadcrumb -->
@endsection
@section('title')
<title> إدارة الكواليتى </title>
@endsection
@section('content')
<!-- row -->
<div class="row">
<div class="card-body">
@if($errors->any())
<div class="alert alert-danger">
<ul>
@foreach($errors->all() as $error)
<li>{{$error}}</li>
@endforeach
</ul>
</div>
@endif
@if(session()->has('delete'))
<div class="alert alert-danger">
<strong>{{session()->get('delete')}}</strong>
</div>
@endif
@if(session()->has('add'))
<div class="alert alert-success">
<strong>{{session()->get('delete')}}</strong>
</div>
@endif
@if(session()->has('notadded'))
<div class="alert alert-danger">
<strong>{{session()->get('notadded')}}</strong>
</div>
@endif
<div class="row row-sm">
<div class="col-sm-6 col-md-4 col-xl-3">
<a class="modal-effect btn btn-outline-primary btn-block" data-effect="effect-scale" data-toggle="modal"
href="#modaldemo8"> إضافة موظف</a>
</div>
</div>
<div class="table-responsive">
<table class="table text-md-nowrap" id="example1">
<thead>
<tr>
<th class="wd-15p border-bottom-0">#</th>
<th class="wd-15p border-bottom-0">إسم الموظف</th>
<th class="wd-20p border-bottom-0">الأيميل</th>
<th class="wd-15p border-bottom-0">تاريخ الإضافه</th>
<th class="wd-15p border-bottom-0"> العمليات</th>
</tr>
</thead>
<tbody>
<?php
$i=0;
?>
@foreach($allUsers as $sec)
<?php
$i++;
?>
<tr>
<td>{{$i}}</td>
<td>{{$sec->name}}</td>
<td>{{$sec->email}}</td>
<td>{{$sec->created_at}}</td>
<td>
<a class="modal-effect btn btn-sm btn-info" data-effect="effect-scale"
data-id="{{ $sec->id }}" data-name="{{ $sec->name }}" data-email="{{ $sec->email }}"
data-is_admin="{{ $sec->is_admin }}" data-toggle="modal" href="#exampleModal2"
title="تعديل"><i class="las la-pen"></i></a>
<a class="modal-effect btn btn-sm btn-danger" data-effect="effect-scale"
data-id="{{ $sec->id }}" data-name="{{ $sec->name }}" data-toggle="modal"
href="#modaldemo9" title="حذف"><i class="las la-trash"></i></a>
<a class=" btn btn-sm btn-success" href="{{route('admin.user.details',$sec->id)}}"
title="عرض"><i class="las la-eye"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="modal" id="modaldemo8">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-header">
<h6 class="modal-title">إضافة موظف</h6><button aria-label="Close" class="close"
data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
</div>
<form action="{{route('admin.store')}}" method="post">
{{csrf_field()}}
<div class="modal-body">
<div class="form-group">
<lable for="exampleInputEmail1">إسم المستخدم </label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<lable for="exampleInputEmail1">الايميل</label>
<input class="form-control" id="email " name="email ">
</div>
<div class="form-group">
<lable for="exampleInputEmail1">الباسوورد</label>
<input class="form-control" id="password" name="password">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">الصلاحيه</label>
<select name="is_admin" id="is_admin" class="form-control" required>
<option value="0" selected>agent</option>
<option value="1">Admin</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn ripple btn-primary" type="submit">حفظ</button>
<button class="btn ripple btn-secondary" data-dismiss="modal"
type="button">إلغاء</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- row closed -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">تعديل الموظف</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{route('admin.update')}}" method="post" autocomplete="off">
{{method_field('PATCH')}}
{{csrf_field()}}
<div class="form-group">
<input type="hidden" name="id" id="id" value="">
<label for="recipient-name" class="col-form-label">اسم الموظف:</label>
<input class="form-control" name="name" id="name" type="text">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">الإيميل :</label>
<input class="form-control" name="email" id="email" type="text">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">الصلاحيه</label>
<select name="drop_permision" id="drop_permision" class="form-control" required>
<option value="0" selected>agent</option>
<option value="1">Admin</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">تاكيد</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">اغلاق</button>
</div>
</form>
</div>
</div>
</div>
<!-- delete -->
<div class="modal" id="modaldemo9">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-demo">
<div class="modal-header">
<h6 class="modal-title">حذف الموظف</h6><button aria-label="Close" class="close" data-dismiss="modal"
type="button"><span aria-hidden="true">×</span></button>
</div>
<form action="{{route('user.destroy')}}" method="POST">
<!-- {{method_field('delete')}}-->
@method('DELETE')
{{csrf_field()}}
<div class="modal-body">
<p>هل انت متاكد من عملية الحذف ؟</p><br>
<input type="hidden" name="id" id="id" value="">
<input class="form-control" name="name" id="name" type="text" readonly>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">الغاء</button>
<button type="submit" class="btn btn-danger">تاكيد</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Container closed -->
</div>
<!-- main-content closed -->
@endsection
@section('js')
<script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/dataTables.dataTables.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/responsive.dataTables.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/jszip.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/pdfmake.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/vfs_fonts.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/buttons.html5.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/buttons.print.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/dataTables.responsive.min.js')}}"></script>
<script src="{{URL::asset('assets/plugins/datatable/js/responsive.bootstrap4.min.js')}}"></script>
<!--Internal Datatable js -->
<script src="{{URL::asset('assets/js/table-data.js')}}"></script>
<!--Internal Datepicker js -->
<script src="{{URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js')}}"></script>
<!-- Internal Select2 js-->
<script src="{{URL::asset('assets/plugins/select2/js/select2.min.js')}}"></script>
<!-- Internal Modal js-->
<script src="{{URL::asset('assets/js/modal.js')}}"></script>
<script>
$('#exampleModal2').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var name = button.data('name')
var email = button.data('email')
var is_admin = button.data('is_admin')
var modal = $(this)
modal.find('.modal-body #id').val(id);
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #email').val(email);
modal.find('.modal-body #drop_permision').val(is_admin);
})
</script>
<script>
$('#modaldemo9').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var name = button.data('name')
var email = button.data('email')
var modal = $(this)
modal.find('.modal-body #id').val(id);
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #email').val(email);
})
</script>
@endsection
web.php
<?php
use IlluminateSupportFacadesRoute;
use AppHttpControllersUserDetailController;
'''/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return redirect()->route('login');
});
Auth::routes();
Route::get('/home', [AppHttpControllersHomeController::class, 'index'])->name('home');
Route::delete('/destroy', [AppHttpControllersHomeController::class, 'destroy'])->name('user.destroy');
Route::get('/admin/home', [AppHttpControllersHomeController::class, 'adminhome'])->name('admin.home')->middleware('is_admin');
Route::get('/admin/user/details/{id}', [AppHttpControllersHomeController::class, 'user_details'])->name('admin.user.details')->middleware('is_admin');
Route::patch('/admin/home/update',[AppHttpControllersHomeController::class,'update'])->name('admin.update')->middleware('is_admin');
Route::post('/admin/store',[AppHttpControllersHomeController::class,'store'])->name('admin.store');
Route::resource('/adminUserDetails',UserDetailController::class)->middleware('is_admin');
//Route::get('/home', [AppHttpControllersAuthLoginController::class, 'login'])->name('home');
//Route::get('/admin/home', [AppHttpControllersAuthLoginController::class, 'login'])->name('admin.home')->middleware('is_admin');
'''
hope to find solution for this error
I work on asp.net MVC web application . i face issue on RequesterIndex
action with type Post failed to cast user code to employee id .
action Requester index with type post fire when failed cast
and it give me message Invalid File No .
Why this message display for me . I assign value for session user code
to employee id also i store employee id on hidden field to avoid reset
value after submit button click.
Why message Invalid File No display when click submit button this is my
question ?
1 – model property EmpId that represent employee Id
public class ResignationRequester
{
public int EmpID { get; set; }
}
2 – controller with action result for Requester Index Get when Load Data
http://ucuatappweb:907/Resignation/RequesterIndex?filenumber=123650
public class ResignationController : Controller
{
[HttpGet]
public ActionResult RequesterIndex(string filenumber)
{
int employeeFileNo;
if (!string.IsNullOrEmpty(filenumber))
{
if (int.TryParse(filenumber, out employeeFileNo))
{
Session[SessionKeys.UserCode] = employeeFileNo;
resignationRequester.EmpID = Convert.ToInt32(Session[SessionKeys.UserCode].ToString());
Session[SessionKeys.UserCode] = employeeFileNo;
}
}
else
{
ViewBag.errorMsg = "unauthorized user";
}
return View(resignationRequester);
}
3 – when click submit button requester index with type post fire
[HttpPost]
public JsonResult RequesterIndex(ResignationRequester resignationRequester)
{
dynamic responseData = new ExpandoObject();
responseData.success = false;
responseData.message = "";
try
{
var filenumber = resignationRequester.EmpID;
if (Session[SessionKeys.UserCode] != null)
{
if (int.TryParse(Session[SessionKeys.UserCode].ToString(), out int empId))
{
resignationRequester.EmpID = empId;
}
else
{
responseData.success = false;
responseData.message = "Invalid File No";
return Json(responseData);
}
}
else
{
responseData.success = false;
responseData.message = "No Data For This File No";
return Json(responseData);
}
}
catch (System.FormatException ex)
{
responseData.success = false;
responseData.message = ex.Message;
}
return Json(responseData);
}
}
4 – View display data requesterIndex.cshtml
<h2 style="font-weight: bold; padding-bottom: 5px;padding-top:50px;">Resignation Form</h2>
<form id="ResignationApp" style="padding-top: 50px; border: 2px solid black;padding-left:20px;font-size:16px;">
@Html.AntiForgeryToken()
<div class="row">
<div class="form-group col-md-6">
<div class="col-md-5">
@Html.LabelFor(model => model.EmpID, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-7">
@Html.EditorFor(model => model.EmpID, new { htmlAttributes = new { @class = "form-control", id = "txtempid", @readonly = "readonly" } })
@Html.HiddenFor(model => model.EmpID, new { htmlAttributes = new { @class = "form-control", id = "hiddentxtempid", @readonly = "readonly" } })
</div>
</div>
</div>
<div class="col-md-7">
<input id="btnsubmit" value="Submit" type="submit" style="background-color: #05014a;font-size:18px;margin-top:20px; color: #fff; height: 40px; width: 200px;margin-bottom:40px;" />
</div>
</form>
<script>
$(document).ready(function () {
var value = $("#txtempid").val();
$("#hiddentxtempid").val(value);
$('#btnsubmit').click(function () {
var empidval = $("#txtempid").val();
var formData = $("#ResignationApp").serialize();
$.ajax({
type: "POST",
dataType: 'json',
url: '@Url.Action("RequesterIndex", "Resignation")',
data: formData,
success: function (response) {
},
error: function (xhr, status, error) {
}
});
});
$("#ResignationApp").submit(function (e) {
e.preventDefault();
});
});
</script>
I am currently trying to make a minigame where a random word is generated from a bunch of arrays. Then, the user has to guess letters to fill out the word(s). However, when I run my code, some if statements aren’t working and I believe that it is because I am failing to use the includes() wrong.
Question: How can I get my code to work as needed?
Note: The arrays are at the very bottom of this post. They shouldn’t be a problem for this question, but they are necessary for the code to work.
game.js:
Note: Sorry, I am not sure what is all necessary in this code to run. I deleted some stuff so if doesn’t work, comment it to me right away.
const difficultyArticle = document.querySelector('#difficulty-article');
const difficultyOptions = document.querySelector('#difficulty-options');
const startGameButton = document.querySelector('#start-game');
const playArticle = document.querySelector('#play-article');
const timeDisplay = document.querySelector('#time-display');
const miniutesDisplay = document.querySelector('#minutes-display');
const secondsDisplay = document.querySelector('#seconds-display');
const categoryDisplay = document.querySelector('#category-display');
const livesDisplay = document.querySelector('#lives-display');
const startTimeButton = document.querySelector('#start-time');
const stopTimeButton = document.querySelector('#stop-time');
const resetGameButton = document.querySelector('#reset-game');
const letterGuessInput = document.querySelector('#letter-guess-input');
let maxTime = 0;
let currentTime = 0;
let currentSeconds = 0;
let currentMinutes = 0;
let lives = 0;
let difficulty;
let countDownInterval;
function playGame(maxTime, maxLives) {
let wordInfo = determineWord();
let randomWord = wordInfo.word;
let category = wordInfo.category;
alert(`${randomWord}, ${category}`);
currentTime = maxTime;
countDown(currentTime);
countDownInterval = setInterval(() => {
countDown();
currentTime--;
}, 1000)
categoryDisplay.innerHTML = `Category: ${category}`;
livesDisplay.innerHTML = `Lives Left: ${lives}`;
}
function determineWord() {
let categories = Object.keys(PlayingArrays);
let category = categories.at(Math.floor(Math.random() * categories.length));
let words = PlayingArrays[category];
let randomWord = words.at(Math.floor(Math.random() * words.length));
return {
word: randomWord,
category: category
}
}
function countDown() {
currentSeconds = currentTime % 60;
currentMinutes = Math.floor(currentTime / 60);
currentSeconds = currentSeconds < 10 ? `0${currentSeconds}` : `${currentSeconds}`;
currentMinutes = currentMinutes < 10 ? `0${currentMinutes}` : `${currentMinutes}`;
if (currentMinutes == 0 && currentSeconds <= 30) {
secondsDisplay.style.color = "red";
miniutesDisplay.style.color = "red";
}
secondsDisplay.innerHTML = currentSeconds;
miniutesDisplay.innerHTML = currentMinutes;
}
function validateInput() {
letterGuessInput.value = letterGuessInput.value.replace(/[^A-Za-z]/g, '');
}
playArticle.classList.add("hidden");
resultArticle.classList.add("hidden");
startGameButton.addEventListener('click', (event) => {
let difficulty = difficultyOptions.value;
if (difficulty == "Easy") {
maxTime = 300;
lives = 8;
}
if (difficulty == "Medium") {
maxTime = 225;
lives = 5;
}
if (difficulty == "Hard") {
maxTime = 150;
lives = 3;
}
if (difficulty == "Impossible") {
maxTime = 75;
lives = 1;
}
difficultyArticle.classList.add("hidden");
playArticle.classList.remove("hidden");
playGame(maxTime, lives);
})
startTimeButton.disabled = true;
stopTimeButton.addEventListener('click', () => {
startTimeButton.disabled = false;
stopTimeButton.disabled = true;
letterGuessInput.disabled = true;
clearInterval(countDownInterval);
})
startTimeButton.addEventListener('click', () => {
startTimeButton.disabled = true;
stopTimeButton.disabled = false;
letterGuessInput.disabled = false;
countDownInterval = setInterval(() => {
countDown();
currentTime--;
}, 1000)
})
resetGameButton.addEventListener('click', () => {
let confirmation = confirm("Are you sure you want to restart the game?");
if (confirmation) {
location.reload();
}
})
letterGuessInput.addEventListener('keydown', (event) => {
if (event.key == 'Enter' && letterGuessInput.value != "") {
let letterGuess = letterGuessInput.value;
if (randomWord.includes(letterGuess)) {
alert(letterGuess);
letterGuessInput.reset();
} else {
livesDisplay.innerHTML = `${lives} - 1`;
lives--;
setTimeout(() => {
livesDisplay.innerHTML = lives;
}, 2500)
letterGuessInput.reset();
}
}
})
index.html:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta name="author" content="Christian Davis">
<link rel="stylesheet" href="styles.css">
<title>Guess That Word</title>
</head>
<body>
<article id="difficulty-article">
<div id="title-display">
<h1>Guess That</h1>
<h2>WORD!</h2>
</div>
<div id="difficulty-display">
<p>Difficulty only determines the the number of lives and the time you get.</p>
<select required id="difficulty-options">
<option value="">---Select Your Difficulty---</option>
<option value="Easy">Easy</option>
<option value="Medium">Medium</option>
<option value="Hard">Hard</option>
<option value="Impossible">Impossible</option>
</select> <br>
<button id="start-game">Start Game</button>
</div>
<img src="./Images/Question Mark Man.jpeg">
</article>
<article id="play-article">
<div id="top-screen-display">
<div id="time-display">
Time left:
<span id="minutes-display" class="time">00</span>:<span id="seconds-display" class="time">00</span>
</div>
<span id="category-display"></span> <br>
<span id="lives-display"></span>
<div id="button-container">
<button id="start-time" class="buttons">Resume Time</button>
<button id="stop-time" class="buttons">Stop Time</button>
<button id="reset-game" class="buttons">Reset Game</button>
</div>
</div>
<div id="letter-guesser">
<input id="letter-guess-input" type="text" maxlength="1" title="Letters Only" placeholder="Your Letter Guess" oninput="validateInput()" required>
</div>
</article>
<script src="game.js"></script>
<script src="Arrays.js"></script>
</body>
</html>
styles.css:
body {
font-family: 'Times New Roman', Times, serif;
}
#difficulty-article.hidden, #play-article.hidden, #result-article.hidden {
display: none;
}
#title-display {
width: 100vw;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
font-size: 18pt;
}
#title-display h1 {
font-weight: 300;
}
#title-display h2 {
font-weight: 800;
color: red;
}
#difficulty-display h2, #difficulty-display h1 {
position: relative;
left: 42.5vw;
}
#difficulty-display p {
text-align: center;
font-size: 8pt;
}
#difficulty-display select, #difficulty-display button {
position: relative;
left: 42.5vw;
text-align: center;
font-size: 12pt;
width: 15vw;
height: 5vh;
}
#play-article {
font-size: 18pt;
}
#top-screen-display {
text-align: center;
}
.buttons {
width: 10vw;
height: 5vh;
font-size: 14pt;
font-family: 'Times New Roman', Times, serif;
}
#letter-guesser {
text-align: center;
height: 10vh;
position: relative;
top: 60vh;
}
#letter-guess-input {
width: 15vw;
height: 10vh;
font-size: 18pt;
text-align: center;
bottom: 0;
}
Arrays.js
const Animals = [
"Aardvark",
"Albatross",
"Alligator",
"Ant",
"Armadillo",
"Axolotl",
"Aye-Aye",
"Badger",
"Banded Palm Civet",
"Bandicoot",
"Barnacle",
"Barracuda",
"Basilisk Lizard",
"Basking Shark",
"Bear",
"Beaver",
"Bedbug",
"Bee",
"Beetle",
"Binturong",
"Bird",
"Birds Of Paradise",
"Bison",
"Blobfish",
"Booby",
"Bongo",
"Bonito Fish",
"Bonobo",
"Booby",
"Bovid",
"Buffalo",
"Bug",
"Butterfly",
"Buzzard",
"Carp",
"Cat",
"Cheetah",
"Chameleon",
"Cockroach",
"Cod",
"Coelacanth",
"Cheetah",
"Chameleon",
"Dolphin",
"Duck",
"Elephant",
"Eagle",
"Fox",
"Frog",
"Giraffe",
"Gorilla",
"Hawk",
"Hippopotamus",
"Iguana",
"Ibis",
"Jaguar",
"Jellyfish",
"Kangaroo",
"Koala",
"Lemur",
"Lion",
"Meerkat",
"Monkey",
"Narwhal",
"Newt",
"Orangutan",
"Ostrich",
"Penguin",
"Peacock",
"Quetzal",
"Quokka",
"Raccoon",
"Rhinoceros",
"Shark",
"Sloth",
"Tiger",
"Toucan",
"Uakari",
"Umbrellabird",
"Viper",
"Vulture",
"Wallaby",
"Wombat",
"X-ray Tetra",
"Xenops",
"Yabby",
"Yak",
"Zebra",
"Zorse",
"Albatross",
"Aye-Aye",
"Badger",
"Banded Palm Civet",
"Bandicoot",
"Barnacle",
"Barracuda",
"Basilisk Lizard",
"Basking Shark",
"Bison",
"Blobfish",
"Booby",
"Bongo",
"Bonito Fish",
"Bonobo",
"Bovid",
"Buffalo",
"Bug",
"Butterfly",
"Buzzard",
"Carp",
"Cat",
"Cockroach",
"Cod",
"Coelacanth",
"Cuttlefish",
"Dung Beetle",
"Earwig",
"Echidna",
"Falcon",
"Fiddler Crab",
"Firefly",
"Flatworm",
"Flying Squirrel",
"Gazelle",
"Gecko",
"Gibbon",
"Glass Lizard",
"Glow Worm",
"Gnu",
"Goblin Shark",
"Goldfish",
"Goose",
"Gopher",
"Gudgeon",
"Guinea Pig",
"Guppy",
"Hamster",
"Harpy Eagle",
"Hercules Beetle",
"Hermit Crab",
"Herring",
"Hornet",
"Hummingbird",
"Hyena",
"Ibex",
"Impala",
"Indigo Bunting",
"Insect",
"Jackal",
"Jerboa",
"Junglefowl",
"Kinkajou",
"Kiwi",
"Kookaburra",
"Kowari",
"Lamprey",
"Leaf-Tailed Gecko",
"Leech",
"Lemming",
"Limpet",
"Lobster",
"Locust",
"Mantis Shrimp",
"Mantis",
"Marmoset",
"Marsupial",
"Mastodon",
"Mayfly",
"Midge",
"Millipede",
"Mole",
"Mollusk",
"Mongoose",
"Monitor Lizard",
"Moth",
"Mouse",
"Mule",
"Nightingale",
"Nudibranch",
"Numbat",
"Nurse Shark",
"Okapi",
"Olm",
"Opossum",
"Owl",
"Panda",
"Parrot",
"Peafowl",
"Pelican",
"Penguin",
"Pheasant",
"Pig",
"Pika",
"Piranha",
"Planarian",
"Platypus",
"Poodle",
"Porcupine",
"Quail",
"Quokka",
"Quoll",
"Rabbit",
"Rat",
"Reindeer",
"Reticulated Python",
"Rhinoceros",
"Sable",
"Salamander",
"Sardine",
"Scorpion",
"Sea Dragon",
"Sea Slug",
"Sea Squirt",
"Sea Urchin",
"Seahorse",
"Seal",
"Shrimp",
"Skunk",
"Sloth",
"Slug",
"Snail",
"Snake",
"Snipe",
"Snow Leopard",
"Sparrow",
"Spider",
"Sponge",
"Squid",
"Squirrel",
"Star-Nosed Mole",
"Starfish",
"Stonefish",
"Sturgeon",
"Sun Bear",
"Swordfish",
"Tapeworm",
"Tarantula",
"Tarsier",
"Termite",
"Thorny Devil",
"Tiger Beetle",
"Tiger Shark",
"Tiger Snake",
"Tiglon",
"Tortoise",
"Toucan",
"Tree Frog",
"Tsetse Fly",
"Uakari",
"Uguisu",
"Umbrellabird",
"Unicorn",
"Urial",
"Vampire Bat",
"Vampire Squid",
"Vicuna",
"Vulture",
"Wallaby",
"Walrus",
"Warthog",
"Wasp",
"Water Buffalo",
"Weasel",
"Weevil",
"Whale",
"Whippet",
"Whitefish",
"Wild Boar",
"Wildebeest",
"Wolf",
"Wolverine",
"Wombat",
"Woodpecker",
"Wrasse",
"Wrench",
"Wryneck",
"X-Ray Tetra",
"X-Ray Fish",
"Xantus's Hummingbird",
"Xeme",
"Xenarthra",
"Xenomorph",
"Xenophyophore",
"Xenops",
"Xenopus",
"Xerus",
"Xiaosaurus",
"Xoloitzcuintli",
"X-Ray Crab",
"X-Ray Shrimp",
"Yaffle",
"Yak",
"Yapok",
"Yardang",
"Yellow-Eyed Penguin",
"Yellowjacket",
"Yelling Cat",
"Yerevan",
"Yeti Crab",
"Yew",
"Ylva",
"Yo-Yo",
"Yodeler",
"Yoshi",
"Yowie",
"Yoyo",
"Yurt",
"Zander",
"Zebra",
"Zebu",
"Zedonk",
"Zebra Shark",
"Zebra Turkeyfish",
"Zorse"
]
const People = [
{ firstName: "Christian", lastName: "Davis" },
{ firstName: "Ada", lastName: "Lovelace" },
{ firstName: "Abraham", lastName: "Lincoln" },
{ firstName: "Albert", lastName: "Einstein" },
{ firstName: "Alice", lastName: "Johnson" },
{ firstName: "Barack", lastName: "Obama" },
{ firstName: "Bob", lastName: "Smith" },
{ firstName: "Cleopatra", lastName: "Jones" },
{ firstName: "Charles", lastName: "Darwin" },
{ firstName: "Charlie", lastName: "Davis" },
{ firstName: "Coco", lastName: "Chanel" },
{ firstName: "David", lastName: "Bowie" },
{ firstName: "Emily", lastName: "Brown" },
{ firstName: "Emmeline", lastName: "Pankhurst" },
{ firstName: "Frank", lastName: "Johnson" },
{ firstName: "Frida", lastName: "Kahlo" },
{ firstName: "Galileo", lastName: "Galilei" },
{ firstName: "Grace", lastName: "Taylor" },
{ firstName: "Grace", lastName: "Hopper" },
{ firstName: "Henry", lastName: "Clark" },
{ firstName: "Helen", lastName: "Keller" },
{ firstName: "Ivy", lastName: "Robinson" },
{ firstName: "Isaac", lastName: "Newton" },
{ firstName: "Jack", lastName: "Anderson" },
{ firstName: "Jane", lastName: "Austen" },
{ firstName: "John", lastName: "Doe" },
{ firstName: "John", lastName: "Kennedy" },
{ firstName: "Katherine", lastName: "Miller" },
{ firstName: "Kylie", lastName: "Johnson" },
{ firstName: "Leonardo", lastName: "da Vinci" },
{ firstName: "Louis", lastName: "Turner" },
{ firstName: "Mia", lastName: "Hill" },
{ firstName: "Marie", lastName: "Curie" },
{ firstName: "Martin", lastName: "King Jr." },
{ firstName: "Nelson", lastName: "Mandela" },
{ firstName: "Noah", lastName: "Parker" },
{ firstName: "Olivia", lastName: "Rossi" },
{ firstName: "Pablo", lastName: "Picasso" },
{ firstName: "Paul", lastName: "White" },
{ firstName: "Quinn", lastName: "Miller" },
{ firstName: "Queen", lastName: "Elizabeth II" },
{ firstName: "Robert", lastName: "Davis" },
{ firstName: "Rosa", lastName: "Parks" },
{ firstName: "Sophia", lastName: "Walker" },
{ firstName: "Steve", lastName: "Jobs" },
{ firstName: "Thomas", lastName: "Edison" },
{ firstName: "Tom", lastName: "Thompson" },
{ firstName: "Ursula", lastName: "Smith" },
{ firstName: "Victor", lastName: "Garcia" },
{ firstName: "Vincent", lastName: "van Gogh" },
{ firstName: "Wendy", lastName: "Jones" },
{ firstName: "William", lastName: "Shakespeare" },
{ firstName: "Winston", lastName: "Churchill" },
{ firstName: "Xander", lastName: "Johnson" },
{ firstName: "Yvonne", lastName: "Miller" },
{ firstName: "Zachary", lastName: "Wilson" },
{ firstName: "Zhang", lastName: "Heng" }
]
const Buildings = [
"Angkor Wat",
"Big Ben",
"Brandenburg Gate",
"Burj Khalifa",
"Christ the Redeemer",
"Colosseum",
"Eiffel Tower",
"Forbidden City",
"Great Wall of China",
"Hagia Sophia",
"Louvre Museum",
"Machu Picchu",
"Neuschwanstein Castle",
"Petra",
"Pyramids of Giza",
"Sagrada Familia",
"Sydney Opera House",
"Taj Mahal",
"The White House",
"Tokyo Tower",
"Alhambra",
"Amsterdam Centraal",
"Atomium",
"Basilica of the Sagrada Familia",
"Blue Mosque",
"Buckingham Palace",
"Casa Milà",
"Casa Batlló",
"Château de Versailles",
"Cologne Cathedral",
"Dresden Frauenkirche",
"Dome of the Rock",
"Edinburgh Castle",
"Empire State Building",
"Fallingwater",
"Florence Cathedral",
"Gherkin",
"Golden Gate Bridge",
"Great Mosque of Djenne",
"Himeji Castle",
"Hofburg",
"Hollywood Sign",
"Jin Mao Tower",
"Leaning Tower of Pisa",
"Mont Saint-Michel",
"Moscow Kremlin",
"Palace of Westminster",
"Pantheon",
"Potala Palace",
"Reichstag Building",
"Rockefeller Center",
"St. Basil's Cathedral",
"St. Peter's Basilica",
"Statue of Liberty",
"Stonehenge",
"Taipei 101",
"The Shard",
"Tower Bridge",
"Uffizi Gallery",
"Willis Tower",
"Windsor Castle",
"Yellow Crane Tower"
]
const Climates = [
"Alpine",
"Arid",
"Boreal Forest",
"Chaparral",
"Coastal",
"Cold Alpine",
"Cold Arid",
"Cold Continental",
"Cold Desert",
"Cold Highland",
"Cold Monsoon",
"Cold Oceanic",
"Cold Prairie",
"Cold Rainforest",
"Cold Savannah",
"Cold Steppe",
"Cold Swamp",
"Cold Temperate",
"Cold Tundra",
"Cold Wetland",
"Cold Oceanic",
"Cold Ice Cap",
"Desert",
"Dry Continental",
"Dry Desert",
"Dry Highland",
"Dry Ice Cap",
"Dry Oceanic",
"Dry Prairie",
"Dry Rainforest",
"Dry Savannah",
"Dry Steppe",
"Dry Swamp",
"Dry Tundra",
"Dry Wetland",
"Equatorial",
"Equatorial Guinea Climate",
"Equatorial Monsoon",
"Equatorial Rainforest",
"Hot Alpine",
"Hot Arid",
"Hot Continental",
"Hot Desert",
"Hot Highland",
"Hot Ice Cap",
"Hot Oceanic",
"Hot Prairie",
"Hot Rainforest",
"Hot Savannah",
"Hot Steppe",
"Hot Swamp",
"Hot Tundra",
"Hot Wetland",
"Hot Oceanic",
"Hot Steppe",
"Hot Savannah",
"Hot Prairie",
"Hot Swamp",
"Hot Alpine",
"Hot Rainforest",
"Hot Monsoon",
"Hot Desert",
"Hot Highland",
"Hot Tundra",
"Hot Ice Cap",
"Humid Continental",
"Humid Subtropical",
"Ice Cap",
"Mangrove",
"Mediterranean",
"Mediterranean Forest",
"Monsoon",
"Mountain",
"Polar",
"Polar Alpine",
"Polar Desert",
"Polar Ice Cap",
"Polar Maritime",
"Polar Tundra",
"Polar Wetland",
"Polar Oceanic",
"Prairie",
"Savanna",
"Semi-Arid",
"Steppe",
"Subarctic",
"Subtropical Desert",
"Subtropical Highland",
"Subtropical Oceanic",
"Subtropical Steppe",
"Subtropical Wetland",
"Swamp",
"Taiga",
"Temperate Oceanic",
"Temperate Rainforest",
"Thundra",
"Tropical Arid",
"Tropical Continental",
"Tropical Desert",
"Tropical Highland",
"Tropical Monsoon",
"Tropical Oceanic",
"Tropical Rainforest",
"Tropical Savannah",
"Tropical Wetland",
"Tundra",
"Warm Arid",
"Warm Oceanic",
"Warm Steppe",
"Wetland",
"Xanthus's Hummingbird",
"Xeme",
"Xenomorph",
"Xenophyophore",
"Xenops",
"Xenopus",
"Xerus",
"Xiaosaurus",
"Xoloitzcuintli",
"X-Ray Crab",
"X-Ray Fish",
"X-Ray Shrimp",
"Yellow-Eyed Penguin",
"Yellowjacket",
"Yelling Cat",
"Yerevan",
"Yeti Crab",
"Yew",
"Ylva",
"Yo-Yo",
"Yodeler",
"Yoshi",
"Yowie",
"Yoyo",
"Yurt",
"Zander",
"Zebra",
"Zebra Shark",
"Zebra Turkeyfish",
"Zedonk"
]
const Countries = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina",
"Armenia",
"Aruba",
"Australia",
"Austria",
"Azerbaijan",
"Bahamas",
"Bahrain",
"Bangladesh",
"Barbados",
"Belarus",
"Belgium",
"Belize",
"Benin",
"Bermuda",
"Bhutan",
"Bolivia",
"Bonaire",
"Sint Eustatius",
"Saba",
"Bosnia and Herzegovina",
"Botswana",
"Bouvet Island",
"Brazil",
"British Indian Ocean Territory",
"Brunei Darussalam",
"Bulgaria",
"Burkina Faso",
"Burundi",
"Cabo Verde",
"Cambodia",
"Cameroon",
"Canada",
"Cayman Islands",
"Central African Republic",
"Chad",
"Chile",
"China",
"Christmas Island",
"Cocos Islands",
"Colombia",
"Comoros",
"Democratic Republic of the Congo",
"The Congo",
"Cook Islands",
"Costa Rica",
"Croatia",
"Cuba",
"Curaçao",
"Cyprus",
"Czechia",
"Côte d'Ivoire",
"Denmark",
"Djibouti",
"Dominica",
"Dominican Republic",
"Ecuador",
"Egypt",
"El Salvador",
"Equatorial Guinea",
"Eritrea",
"Estonia",
"Eswatini",
"Ethiopia",
"Falkland Islands",
"Faroe Islands",
"Fiji",
"Finland",
"France",
"French Guiana",
"French Polynesia",
"Gabon",
"Gambia",
"Georgia",
"Germany",
"Ghana",
"Gibraltar",
"Greece",
"Greenland",
"Grenada",
"Guadeloupe",
"Guam",
"Guatemala",
"Guernsey",
"Guinea",
"Guinea-Bissau",
"Guyana",
"Haiti",
"Heard Island",
"Holy See",
"Honduras",
"Hong Kong",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Islamic Republic of Iran",
"Iraq",
"Ireland",
"Isle of Man",
"Israel",
"Italy",
"Jamaica",
"Japan",
"Jersey",
"Jordan",
"Kazakhstan",
"Kenya",
"Kiribati",
"Democratic People's Republic of Korea",
"Republic of Korea",
"Kuwait",
"Kyrgyzstan",
"Lao People's Democratic Republic",
"Latvia",
"Lebanon",
"Lesotho",
"Liberia",
"Libya",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macao",
"Madagascar",
"Malawi",
"Malaysia",
"Maldives",
"Mali",
"Malta",
"Marshall Islands",
"Martinique",
"Mauritania",
"Mauritius",
"Mayotte",
"Mexico",
"Micronesia",
"Moldova",
"Monaco",
"Mongolia",
"Montenegro",
"Montserrat",
"Morocco",
"Mozambique",
"Myanmar",
"Namibia",
"Nauru",
"Nepal",
"Netherlands",
"New Caledonia",
"New Zealand",
"Nicaragua",
"Niger",
"Nigeria",
"Niue",
"Norfolk Island",
"Mariana Islands",
"Norway",
"Oman",
"Pakistan",
"Palau",
"Palestine",
"Panama",
"Papua New Guinea",
"Paraguay",
"Peru",
"Philippines",
"Pitcairn",
"Poland",
"Portugal",
"Puerto Rico",
"Qatar",
"Macedonia",
"Romania",
"Russia",
"Rwanda",
"Réunion",
"Saint Barthélemy",
"Saint Helena",
"Saint Kitts",
"Saint Lucia",
"Saint Martin",
"Saint Pierre",
"Saint Vincent",
"Samoa",
"San Marino",
"Sao Tome and Principe",
"Saudi Arabia",
"Senegal",
"Serbia",
"Seychelles",
"Sierra Leone",
"Singapore",
"Sint Maarten",
"Slovakia",
"Slovenia",
"Solomon Islands",
"Somalia",
"South Africa",
"South Georgia",
"South Sudan",
"Spain",
"Sri Lanka",
"Sudan",
"Suriname",
"Svalbard and Jan Mayen",
"Sweden",
"Switzerland",
"Syrian Arab Republic",
"Taiwan",
"Tajikistan",
"Tanzania",
"Thailand",
"Timor-Leste",
"Togo",
"Tokelau",
"Tonga",
"Trinidad and Tobago",
"Tunisia",
"Turkey",
"Turkmenistan",
"Turks and Caicos",
"Tuvalu",
"Uganda",
"Ukraine",
"United Arab Emirates",
"United Kingdom",
"United States",
"Uruguay",
"Uzbekistan",
"Vanuatu",
"Venezuela",
"Vietnam",
"Virgin Islands",
"Virgin Islands",
"Wallis and Futuna",
"Western Sahara",
"Yemen",
"Zambia",
"Zimbabwe",
"Åland Islands"
]
const States = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
]
const Capitals = [
"Montgomery",
"Juneau",
"Phoenix",
"Little Rock",
"Sacramento",
"Denver",
"Hartford",
"Dover",
"Tallahassee",
"Atlanta",
"Honolulu",
"Boise",
"Springfield",
"Indianapolis",
"Des Moines",
"Topeka",
"Frankfort",
"Baton Rouge",
"Augusta",
"Annapolis",
"Boston",
"Lansing",
"St. Paul",
"Jackson",
"Jefferson City",
"Helena",
"Lincoln",
"Carson City",
"Concord",
"Trenton",
"Santa Fe",
"Albany",
"Raleigh",
"Bismarck",
"Columbus",
"Oklahoma City",
"Salem",
"Harrisburg",
"Providence",
"Columbia",
"Pierre",
"Nashville",
"Austin",
"Salt Lake City",
"Montpelier",
"Richmond",
"Olympia",
"Charleston",
"Madison",
"Cheyenne",
"Tokyo", // Japan
"Paris", // France
"Berlin", // Germany
"Cairo", // Egypt
"Moscow", // Russia
"Seoul", // South Korea
"Oslo", // Norway
"Wellington", // New Zealand
"Beijing", // China
"Rome", // Italy
"Dublin", // Ireland
"Canberra", // Australia
"Nairobi", // Kenya
"Bangkok", // Thailand
"Stockholm", // Sweden
"Amsterdam", // Netherlands
"Brasília", // Brazil
"Lisbon", // Portugal
"Ottawa" // Canada
]
const Foods = [
"Almond",
"Apple",
"Apple Pie",
"Asparagus",
"Banana",
"Barley",
"Beef",
"Broccoli",
"Brownie",
"Butter",
"Candy",
"Carrot",
"Cheese",
"Cherry",
"Chicken",
"Couscous",
"Daikon",
"Date",
"Doughnut",
"Duck",
"Durian",
"Eclair",
"Egg",
"Eggplant",
"Elderberry",
"Einkorn",
"Evaporated Milk",
"Fennel",
"Feta",
"Fig",
"Fish",
"Fudge",
"Gelato",
"Garlic",
"Grapes",
"Grits",
"Grouper",
"Habanero",
"Halibut",
"Havarti",
"Hempseed",
"Honeydew",
"Hot Fudge Sundae",
"Ice Cream",
"Ice Cream Sandwich",
"Iceberg Lettuce",
"Israeli Couscous",
"Jalapeño Jack",
"Jelly Beans",
"Jellyfish",
"Kiwi",
"Kale",
"Kamut",
"Kettle Corn",
"Lamb",
"Lemon",
"Lemon Bars",
"Lettuce",
"Macarons",
"Mango",
"Milk",
"Mousse",
"Mushroom",
"Mussels",
"Napa Cabbage",
"Natto",
"Nondairy Yogurt",
"Nougat",
"Oatmeal Raisin Cookies",
"Olive Oil",
"Orange",
"Ostrich",
"Papaya",
"Parmesan",
"Peach",
"Pear",
"Pecan",
"Pepper",
"Pesto",
"Pineapple",
"Pork",
"Potato",
"Pudding",
"Pumpkin",
"Quark",
"Quiche",
"Quinoa",
"Raspberry",
"Rice",
"Sausage",
"Shrimp",
"Sorghum",
"Soy Milk",
"Spinach",
"Strawberry",
"Sushi",
"Taco",
"Tapioca",
"Tea",
"Teff",
"Toffee",
"Udon",
"Vanilla",
"Walnut",
"Watermelon",
"Wonton",
"Yogurt"
]
const PlayingArrays = {
Animals,
People,
Buildings,
Climates,
Countries,
States,
Capitals,
Foods
}
I’m attempting to mimic Cypress intercept from a youtube tutorial but for some reason mine isn’t working.
Here’s the code identical to the tutorial
it.only('test api with simple intercept stubbing', () => {
cy.visit('https://dummyapi.io/explorer');
cy.intercept({
path: 'data/v1/post/60d21af267d0d8992e610b8d/comment?limit=10'
}).as('comments')
cy.get('.flex > :nth-child(5)').click();
cy.wait('@comments').then(intercept => {
cy.log(JSON.stringify(intercept.response.body));
expect(intercept.response.body.limit).equal(10)
})
})Looking in the cypress debug console I can actually see the comments element that was clicked but it just hangs on the cy.wait
So it’s navigating to the page, clicking ‘comments’, but then it just hangs on cy.wait and never asserts a successful GET. Any help would be greatly appreciated.
I am trying to use Vue Slider Component. I have the following simple component as part of my app:
<template>
<div>
<vue-slider></vue-slider>
</div>
</template>
<script>
// App.vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
components: {
VueSlider
}
}
</script>
I am using vue 3.3.4 with vite 4.5.2, but whenever I try using this component I get the following error: Uncaught SyntaxError: The requested module '/node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js?v=6ac5c133' does not provide an export named 'default'
As far as I can tell, the component does not provide any named imports either, so what am I overlooking?