Daily Challenge #11

Discuss
#1

This one was send to me by @Italo.

"How about you ask them to make the simplest note taker app. It has to be just a place to take a quick note, nothing fancy. The same note text should be there when the app is opened again.

The one that can do the best looking and functional app with less blocks and components wins."

Italo made a sample app with only 2 components and 9 blocks.

Could you also make a note taking app with the same amount of components and blocks or could you do it in less?

I won’t post the blocks that Italo send me yet but will do so in around 6 hours.

3 Likes
#2

He already beat me with 2 components :joy:

#4

I think Italo used these blocks, 9 blocks, 2 components.

image
image1351Ă—454 51 KB

But I’m not sure that if there is a better method with less blocks for that. The only way is using an extension to reduce blocks :sweat_smile: I tried to use TinyWebDB, File component but still 9 (or more) blocks.

4 Likes
#5

You have almost the same blocks as @Italo. Only one block different. Great job.
Can you guess which block he used?

Hint: With your blocks every time the textbox changes it gets saved. He saves only once.

3 Likes
#6

Then probably, it is Screen.On App Pause or Screen.On App Stop. :grin:

1 Like
#7

And your guess would be? :crazy_face:

1 Like
#8

I think it is Stop event then, so yeah :sweat_smile:

I thought maybe Back Pressed event is a way to save note, but it prevents exiting from app by using back button (you need to add close app block manually). So it will save more than once if you don’t add that block. :smile:

So On App Stop is the best solution for me.

6 Likes
#9

These are the blocks from @Italo.

1 Like
#10

Lol, you guys completed the challenge and it took me 6hrs to find a place in my house where I can hide my network from zammers

2 Likes
#11

What are zammers?

#12

Yay! My guess was correct! :grin:

But I will still try to find a solution which less than 9 blocks. Because I know, it is not impossible :smirk:

3 Likes
#13

That’s the spirit! :+1:

3 Likes
#14

Well, I have 2 methods which saves notes. Yeah these are maybe not useful at all for daily note taking, but the purpose is using less blocks as possible, right?

So there are my methods;

1. Clipboard 8 blocks

I know that if someone copies another text, it will show another text, but it saving the note anyway:

Ek%20A%C3%A7%C4%B1klama%202019-09-23%20115619
Ek%20A%C3%A7%C4%B1klama%202019-09-23%20115619802Ă—427 135 KB

2. TinyWebDB + JavaScript 3 blocks

Maybe using WebViewer component is like cheating in this challenge (there is no rule about it :crazy_face:), but I used it because I found this method very cool. And all note saving scripts injected to HTML code. So it is possible to reduce blocks to 3.

Pros:

  • Since TinyWebDB is an online database, you can find your note content even you wipe data of the app.
  • You can access the note even you change the device.

Cons:

  • Everyone can access/modify the note if they know the tag. I used “note” tag in this example. If you are going to use this method in your app, you should prefer a random tag for security/privacy.
  • Only 500 characters.

Ek%20A%C3%A7%C4%B1klama%202019-09-23%20141914
Ek%20A%C3%A7%C4%B1klama%202019-09-23%20141914802Ă—276 112 KB

image
image886Ă—195 11.5 KB

The HTML code 
<!DOCTYPE html>
<html>
<body>

<form action="javascript:setNote();" method="post" enctype=application/x-www-form-urlencoded>
<input type="hidden" name="fmt" value="html">
<input class="notevalue" type="text" name="tag" value="note" style="display: none;">
<input class="textbox" type="text" name="value" value="">
<input type="submit" value="Save">
</form>

<button onclick="getNote();" type="button">Get note</button>

</body>

<script>
function getNote() {
    const Http = new XMLHttpRequest();
    const url = 'http://tinywebdb.appinventor.mit.edu/getvalue';
    var params = "tag=note";
    Http.open("POST", url, true);
    Http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    Http.send(params);

    Http.onreadystatechange = (e) => {
    	var text = Http.responseText;
       document.getElementsByClassName("textbox")[0].value = text.replace('["VALUE","note",',"").replace("]","").replace('"',"").replace('"',"");
    }
};

function setNote() {
    const Http = new XMLHttpRequest();
    const url = 'http://tinywebdb.appinventor.mit.edu/storeavalue';
    var params = "tag=note&value=" + document.getElementsByClassName("textbox")[0].value;
    Http.open("POST", url, true);
    Http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    Http.send(params);
};

getNote();
</script>

</html>
6 Likes
#15

wow
you are fantstic

2 Likes
#16

Wow this is great. You are on a roll. :+1:

I wonder what @Italo has to say about this.

2 Likes
#17

That’s awesome. We are all learning new things here.
Both methods does what the initial rules said, so they count.

3 Blocks! :+1::+1:

2 Likes
#18

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.